@fusion.dev/helix 0.173.0 → 0.175.0

package/dist/strands/shader.js

@@ -7,6 +7,8 @@ uniform float uScroll;
 uniform vec2 uT;
 uniform float uTime;
 uniform float uSpread;
+uniform float uDepth;
+uniform float uDrift;
 
 float h1(float n) { return fract(sin(n * 127.1 + 311.7) * 43758.5453); }
 
@@ -39,17 +41,25 @@ vec3 strandAt(float id, float t, out vec3 info) {
   float r2 = h1(id + 1.71);
   float r3 = h1(id + 3.37);
   float r4 = h1(id + 5.93);
+  float r8 = h1(id + 13.7);
+  float r9 = h1(id + 17.3);
   float n = (r1 + r2 + r3) / 1.5 - 1.0;
   float z = (r4 - 0.5) * 2.0;
   float along = c.y + c.x * uView.x;
-  float th = along * 0.0033 + uTime * 0.25 + r2 * 0.5;
+  float pace = 1.0 + uDrift * (r8 - 0.5) * 1.2;
+  float th = along * 0.002 * (1.0 + uDrift * (r9 - 0.5) * 0.3) + uTime * 0.25 * pace
+    + r2 * (0.5 + uDrift * 2.6);
   float width = c.z * uSpread;
-  float fan = width * uView.x * (1.0 + 0.25 * sin(uTime * 0.4 + along * 0.0045));
+  float breadth = width * uView.x * (1.0 + 0.25 * sin(uTime * 0.4 + along * 0.0045));
   float sway = sin(along * 0.006 + uTime * 0.23) * mix(6.0, 30.0, smoothstep(0.02, 0.2, width));
-  float lat = sway + fan * (n * cos(th) + z * 0.55 * sin(th));
-  lat += sin(along * 0.01 + uTime * (0.6 + 0.5 * r1) + r1 * 6.283) * 12.0 * (0.3 + r3);
+  float ct = cos(th);
+  float st = sin(th);
+  float depth = clamp((z * 0.55 * ct - n * st) / 1.15, -1.0, 1.0);
+  float lat = sway + breadth * (n * ct + z * 0.55 * st) * (1.0 + uDepth * 0.35 * depth);
+  lat += sin(along * 0.006 * (1.0 + uDrift * (r9 - 0.5) * 0.3) + uTime * (0.6 + 0.5 * r1) * pace
+    + r1 * 6.283) * 12.0 * (0.3 + r3) * (1.0 + uDrift * 0.5);
   info = vec3(max(c.w, 0.0), width, along);
-  return vec3(p + nr * lat, z * sin(th));
+  return vec3(p + nr * lat, depth);
 }
 `;
 export const LINE_VERTEX = `#version 300 es
@@ -57,6 +67,7 @@ layout(location = 0) in vec2 aVert;
 layout(location = 1) in float aId;
 uniform float uDpr;
 uniform float uSoftness;
+uniform float uContrast;
 uniform vec3 uGlow;
 uniform vec3 uTint;
 uniform vec3 uPeak;
@@ -77,8 +88,11 @@ void main() {
   tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);
   vec2 nrm = vec2(-tg.y, tg.x);
   float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6);
-  float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + 0.3 * a.z);
-  float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr, 1.0);
+  /* Nearer is thicker, and the back of the ribbon falls out of focus: wider
+     at the same energy, so it reads as haze behind the sharp strands. */
+  float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + (0.3 + 0.5 * uDepth) * a.z);
+  float focus = uDepth * smoothstep(-0.1, -0.9, a.z) * 10.0 * uDpr;
+  float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr + focus, 1.0);
   float drawW = w + 2.5 * uDpr;
   vec2 res = uView * uDpr;
   vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5;
@@ -86,12 +100,18 @@ void main() {
   vSide = aVert.y * drawW / w;
   float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283);
   shimmer *= shimmer;
-  float bright = mix(0.25, 1.0, pow(r5, 1.4));
+  /* Contrast spreads the strands' brightness: a few burn and most fall back.
+     The mean is held, so the ribbon as a whole keeps its strength. */
+  float spread = mix(1.4, 4.5, uContrast);
+  float least = mix(0.25, 0.04, uContrast);
+  float bright = mix(least, 1.0, pow(r5, spread)) * 0.5625 / (least + (1.0 - least) / (spread + 1.0));
   float energy = min(base, w) / w;
-  float depth = 0.7 + 0.3 * a.z;
+  float fall = 0.3 + 0.5 * uDepth;
+  float depth = (1.0 - fall * (1.0 - a.z) * 0.5) / (1.0 - fall * 0.5);
+  float rest = mix(0.35, 0.15, uContrast);
   vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9);
   col = mix(col, uPeak, step(0.93, r7) * 0.6);
-  vColor = col * energy * info.x * (0.35 + 0.65 * shimmer) * bright * depth;
+  vColor = col * energy * info.x * (rest + (1.0 - rest) * shimmer) * bright * depth;
 }
 `;
 export const LINE_FRAGMENT = `#version 300 es
@@ -125,7 +145,9 @@ void main() {
   gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0);
   gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr;
   float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0));
-  vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * info.x * 0.8;
+  /* By the root of the ribbon's brightness, so specks show along a dim ribbon
+     as well as round a bright bend. */
+  vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * sqrt(info.x) * 0.8;
 }
 `;
 export const DUST_FRAGMENT = `#version 300 es
@@ -183,10 +205,11 @@ uniform vec3 uGround;
 uniform vec3 uInk;
 uniform float uLight;
 uniform float uGain;
+uniform float uBloom;
 out vec4 outColor;
 float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }
 void main() {
-  vec3 e = texture(uScene, vUv).rgb + texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9;
+  vec3 e = texture(uScene, vUv).rgb + (texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9) * uBloom;
   e *= uGain;
   vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);
   float lum = dot(e, vec3(0.3, 0.55, 0.15));

package/dist/strands/stop/strands-stop.d.ts

@@ -7,8 +7,8 @@ import type { StrandsVariant } from '../path.js';
  *
  * @description
  * Placed inside a `helix-strands` with `travel`, a stop names an element with
- * `for` and says which form the ribbon takes when the page reaches it: a `fan`
- * bending through it, a `ribbon` passing through `at`, or `waves` crossing at
+ * `for` and says which form the ribbon takes when the page reaches it: a `bend`
+ * turning through it, a `ribbon` passing through `at`, or `waves` crossing at
  * its top edge. The stops are read in page order, whatever order they are
  * written in, and a stop naming no element is skipped.
  *
@@ -26,9 +26,9 @@ import type { StrandsVariant } from '../path.js';
 export declare class HelixStrandsStop extends HelixElement {
     static styles: CSSResultGroup;
     /**
-     * Where the form sits across the page, as a share of the width: the fan's
-     * bend or the ribbon's axis. A wave crosses the whole width and does not
-     * read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.
+     * Where the form sits across the page, as a share of the width: the bend's
+     * apex or the ribbon's axis. A wave crosses the whole width and does not
+     * read it. Unset, a bend's apex sits at `0.5` and a ribbon runs down the middle.
      */
     at?: number;
     /** The id of the element the form is pinned to, in the same tree as the stop. */