@fusion.dev/helix 0.172.0 → 0.174.0

package/dist/strands/shader.d.ts

@@ -1,9 +1,9 @@
 /** Each strand as a ribbon of quads, wide enough to anti-alias and to blur. */
-export declare const LINE_VERTEX = "#version 300 es\nlayout(location = 0) in vec2 aVert;\nlayout(location = 1) in float aId;\nuniform float uDpr;\nuniform float uSoftness;\nuniform vec3 uGlow;\nuniform vec3 uTint;\nuniform vec3 uPeak;\nout float vSide;\nout vec3 vColor;\n\nuniform vec4 uPts[96];\nuniform int uCount;\nuniform vec2 uView;\nuniform float uScroll;\nuniform vec2 uT;\nuniform float uTime;\nuniform float uSpread;\n\nfloat h1(float n) { return fract(sin(n * 127.1 + 311.7) * 43758.5453); }\n\nvec4 pt(int i) { return uPts[clamp(i, 0, uCount - 1)]; }\n\nvec4 spline(float t) {\n  float s = clamp(t, 0.0, 1.0) * float(uCount - 1);\n  int i = min(int(floor(s)), uCount - 2);\n  float f = s - float(i);\n  vec4 p0 = pt(i - 1);\n  vec4 p1 = pt(i);\n  vec4 p2 = pt(i + 1);\n  vec4 p3 = pt(i + 2);\n  float f2 = f * f;\n  float f3 = f2 * f;\n  return 0.5 * ((2.0 * p1) + (-p0 + p2) * f + (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * f2\n    + (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * f3);\n}\n\nvec2 place(vec4 c) { return vec2(c.x * uView.x, c.y - uScroll); }\n\nvec3 strandAt(float id, float t, out vec3 info) {\n  vec4 c = spline(t);\n  vec2 p = place(c);\n  vec2 q = place(spline(t + 0.0004));\n  vec2 tg = q - p;\n  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);\n  vec2 nr = vec2(-tg.y, tg.x);\n  float r1 = h1(id + 0.13);\n  float r2 = h1(id + 1.71);\n  float r3 = h1(id + 3.37);\n  float r4 = h1(id + 5.93);\n  float n = (r1 + r2 + r3) / 1.5 - 1.0;\n  float z = (r4 - 0.5) * 2.0;\n  float along = c.y + c.x * uView.x;\n  float th = along * 0.0033 + uTime * 0.25 + r2 * 0.5;\n  float width = c.z * uSpread;\n  float fan = width * uView.x * (1.0 + 0.25 * sin(uTime * 0.4 + along * 0.0045));\n  float sway = sin(along * 0.006 + uTime * 0.23) * mix(6.0, 30.0, smoothstep(0.02, 0.2, width));\n  float lat = sway + fan * (n * cos(th) + z * 0.55 * sin(th));\n  lat += sin(along * 0.01 + uTime * (0.6 + 0.5 * r1) + r1 * 6.283) * 12.0 * (0.3 + r3);\n  info = vec3(max(c.w, 0.0), width, along);\n  return vec3(p + nr * lat, z * sin(th));\n}\n\nvoid main() {\n  float id = aId;\n  float r5 = h1(id + 7.77);\n  float r6 = h1(id + 9.19);\n  float r7 = h1(id + 11.3);\n  float t = mix(uT.x, uT.y, aVert.x);\n  vec3 info;\n  vec3 unused;\n  vec3 a = strandAt(id, t, info);\n  vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused);\n  vec2 tg = b.xy - a.xy;\n  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);\n  vec2 nrm = vec2(-tg.y, tg.x);\n  float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6);\n  float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + 0.3 * a.z);\n  float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr, 1.0);\n  float drawW = w + 2.5 * uDpr;\n  vec2 res = uView * uDpr;\n  vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5;\n  gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0);\n  vSide = aVert.y * drawW / w;\n  float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283);\n  shimmer *= shimmer;\n  float bright = mix(0.25, 1.0, pow(r5, 1.4));\n  float energy = min(base, w) / w;\n  float depth = 0.7 + 0.3 * a.z;\n  vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9);\n  col = mix(col, uPeak, step(0.93, r7) * 0.6);\n  vColor = col * energy * info.x * (0.35 + 0.65 * shimmer) * bright * depth;\n}\n";
+export declare const LINE_VERTEX = "#version 300 es\nlayout(location = 0) in vec2 aVert;\nlayout(location = 1) in float aId;\nuniform float uDpr;\nuniform float uSoftness;\nuniform float uContrast;\nuniform vec3 uGlow;\nuniform vec3 uTint;\nuniform vec3 uPeak;\nout float vSide;\nout vec3 vColor;\n\nuniform vec4 uPts[96];\nuniform int uCount;\nuniform vec2 uView;\nuniform float uScroll;\nuniform vec2 uT;\nuniform float uTime;\nuniform float uSpread;\nuniform float uDepth;\nuniform float uDrift;\n\nfloat h1(float n) { return fract(sin(n * 127.1 + 311.7) * 43758.5453); }\n\nvec4 pt(int i) { return uPts[clamp(i, 0, uCount - 1)]; }\n\nvec4 spline(float t) {\n  float s = clamp(t, 0.0, 1.0) * float(uCount - 1);\n  int i = min(int(floor(s)), uCount - 2);\n  float f = s - float(i);\n  vec4 p0 = pt(i - 1);\n  vec4 p1 = pt(i);\n  vec4 p2 = pt(i + 1);\n  vec4 p3 = pt(i + 2);\n  float f2 = f * f;\n  float f3 = f2 * f;\n  return 0.5 * ((2.0 * p1) + (-p0 + p2) * f + (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * f2\n    + (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * f3);\n}\n\nvec2 place(vec4 c) { return vec2(c.x * uView.x, c.y - uScroll); }\n\nvec3 strandAt(float id, float t, out vec3 info) {\n  vec4 c = spline(t);\n  vec2 p = place(c);\n  vec2 q = place(spline(t + 0.0004));\n  vec2 tg = q - p;\n  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);\n  vec2 nr = vec2(-tg.y, tg.x);\n  float r1 = h1(id + 0.13);\n  float r2 = h1(id + 1.71);\n  float r3 = h1(id + 3.37);\n  float r4 = h1(id + 5.93);\n  float r8 = h1(id + 13.7);\n  float r9 = h1(id + 17.3);\n  float n = (r1 + r2 + r3) / 1.5 - 1.0;\n  float z = (r4 - 0.5) * 2.0;\n  float along = c.y + c.x * uView.x;\n  float pace = 1.0 + uDrift * (r8 - 0.5) * 1.2;\n  float th = along * 0.002 * (1.0 + uDrift * (r9 - 0.5) * 0.3) + uTime * 0.25 * pace\n    + r2 * (0.5 + uDrift * 2.6);\n  float width = c.z * uSpread;\n  float breadth = width * uView.x * (1.0 + 0.25 * sin(uTime * 0.4 + along * 0.0045));\n  float sway = sin(along * 0.006 + uTime * 0.23) * mix(6.0, 30.0, smoothstep(0.02, 0.2, width));\n  float ct = cos(th);\n  float st = sin(th);\n  float depth = clamp((z * 0.55 * ct - n * st) / 1.15, -1.0, 1.0);\n  float lat = sway + breadth * (n * ct + z * 0.55 * st) * (1.0 + uDepth * 0.35 * depth);\n  lat += sin(along * 0.006 * (1.0 + uDrift * (r9 - 0.5) * 0.3) + uTime * (0.6 + 0.5 * r1) * pace\n    + r1 * 6.283) * 12.0 * (0.3 + r3) * (1.0 + uDrift * 0.5);\n  info = vec3(max(c.w, 0.0), width, along);\n  return vec3(p + nr * lat, depth);\n}\n\nvoid main() {\n  float id = aId;\n  float r5 = h1(id + 7.77);\n  float r6 = h1(id + 9.19);\n  float r7 = h1(id + 11.3);\n  float t = mix(uT.x, uT.y, aVert.x);\n  vec3 info;\n  vec3 unused;\n  vec3 a = strandAt(id, t, info);\n  vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused);\n  vec2 tg = b.xy - a.xy;\n  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);\n  vec2 nrm = vec2(-tg.y, tg.x);\n  float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6);\n  /* Nearer is thicker, and the back of the ribbon falls out of focus: wider\n     at the same energy, so it reads as haze behind the sharp strands. */\n  float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + (0.3 + 0.5 * uDepth) * a.z);\n  float focus = uDepth * smoothstep(-0.1, -0.9, a.z) * 10.0 * uDpr;\n  float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr + focus, 1.0);\n  float drawW = w + 2.5 * uDpr;\n  vec2 res = uView * uDpr;\n  vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5;\n  gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0);\n  vSide = aVert.y * drawW / w;\n  float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283);\n  shimmer *= shimmer;\n  /* Contrast spreads the strands' brightness: a few burn and most fall back.\n     The mean is held, so the ribbon as a whole keeps its strength. */\n  float spread = mix(1.4, 4.5, uContrast);\n  float least = mix(0.25, 0.04, uContrast);\n  float bright = mix(least, 1.0, pow(r5, spread)) * 0.5625 / (least + (1.0 - least) / (spread + 1.0));\n  float energy = min(base, w) / w;\n  float fall = 0.3 + 0.5 * uDepth;\n  float depth = (1.0 - fall * (1.0 - a.z) * 0.5) / (1.0 - fall * 0.5);\n  float rest = mix(0.35, 0.15, uContrast);\n  vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9);\n  col = mix(col, uPeak, step(0.93, r7) * 0.6);\n  vColor = col * energy * info.x * (rest + (1.0 - rest) * shimmer) * bright * depth;\n}\n";
 /** A soft profile across the ribbon, added into the buffer. */
 export declare const LINE_FRAGMENT = "#version 300 es\nprecision highp float;\nin float vSide;\nin vec3 vColor;\nuniform float uScale;\nout vec4 outColor;\nvoid main() {\n  outColor = vec4(vColor * exp(-vSide * vSide * 2.4) * uScale, 1.0);\n}\n";
 /** Specks drifting along the strands, thickest where the ribbon is bright. */
-export declare const DUST_VERTEX = "#version 300 es\nuniform float uDpr;\nuniform float uStrands;\nuniform vec3 uGlow;\nuniform vec3 uPeak;\nout vec3 vColor;\n\nuniform vec4 uPts[96];\nuniform int uCount;\nuniform vec2 uView;\nuniform float uScroll;\nuniform vec2 uT;\nuniform float uTime;\nuniform float uSpread;\n\nfloat h1(float n) { return fract(sin(n * 127.1 + 311.7) * 43758.5453); }\n\nvec4 pt(int i) { return uPts[clamp(i, 0, uCount - 1)]; }\n\nvec4 spline(float t) {\n  float s = clamp(t, 0.0, 1.0) * float(uCount - 1);\n  int i = min(int(floor(s)), uCount - 2);\n  float f = s - float(i);\n  vec4 p0 = pt(i - 1);\n  vec4 p1 = pt(i);\n  vec4 p2 = pt(i + 1);\n  vec4 p3 = pt(i + 2);\n  float f2 = f * f;\n  float f3 = f2 * f;\n  return 0.5 * ((2.0 * p1) + (-p0 + p2) * f + (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * f2\n    + (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * f3);\n}\n\nvec2 place(vec4 c) { return vec2(c.x * uView.x, c.y - uScroll); }\n\nvec3 strandAt(float id, float t, out vec3 info) {\n  vec4 c = spline(t);\n  vec2 p = place(c);\n  vec2 q = place(spline(t + 0.0004));\n  vec2 tg = q - p;\n  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);\n  vec2 nr = vec2(-tg.y, tg.x);\n  float r1 = h1(id + 0.13);\n  float r2 = h1(id + 1.71);\n  float r3 = h1(id + 3.37);\n  float r4 = h1(id + 5.93);\n  float n = (r1 + r2 + r3) / 1.5 - 1.0;\n  float z = (r4 - 0.5) * 2.0;\n  float along = c.y + c.x * uView.x;\n  float th = along * 0.0033 + uTime * 0.25 + r2 * 0.5;\n  float width = c.z * uSpread;\n  float fan = width * uView.x * (1.0 + 0.25 * sin(uTime * 0.4 + along * 0.0045));\n  float sway = sin(along * 0.006 + uTime * 0.23) * mix(6.0, 30.0, smoothstep(0.02, 0.2, width));\n  float lat = sway + fan * (n * cos(th) + z * 0.55 * sin(th));\n  lat += sin(along * 0.01 + uTime * (0.6 + 0.5 * r1) + r1 * 6.283) * 12.0 * (0.3 + r3);\n  info = vec3(max(c.w, 0.0), width, along);\n  return vec3(p + nr * lat, z * sin(th));\n}\n\nvoid main() {\n  float id = float(gl_VertexID);\n  float sid = floor(h1(id + 0.5) * uStrands);\n  float r = h1(id + 2.3);\n  float r2 = h1(id + 4.1);\n  float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2)));\n  vec3 info;\n  vec3 a = strandAt(sid, t, info);\n  vec2 off = (vec2(h1(id + 6.1), h1(id + 8.3)) - 0.5) * (24.0 + (150.0 + info.y * uView.x) * h1(id + 9.7));\n  vec2 res = uView * uDpr;\n  vec2 px = (a.xy + off) * uDpr;\n  gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0);\n  gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr;\n  float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0));\n  vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * info.x * 0.8;\n}\n";
+export declare const DUST_VERTEX = "#version 300 es\nuniform float uDpr;\nuniform float uStrands;\nuniform vec3 uGlow;\nuniform vec3 uPeak;\nout vec3 vColor;\n\nuniform vec4 uPts[96];\nuniform int uCount;\nuniform vec2 uView;\nuniform float uScroll;\nuniform vec2 uT;\nuniform float uTime;\nuniform float uSpread;\nuniform float uDepth;\nuniform float uDrift;\n\nfloat h1(float n) { return fract(sin(n * 127.1 + 311.7) * 43758.5453); }\n\nvec4 pt(int i) { return uPts[clamp(i, 0, uCount - 1)]; }\n\nvec4 spline(float t) {\n  float s = clamp(t, 0.0, 1.0) * float(uCount - 1);\n  int i = min(int(floor(s)), uCount - 2);\n  float f = s - float(i);\n  vec4 p0 = pt(i - 1);\n  vec4 p1 = pt(i);\n  vec4 p2 = pt(i + 1);\n  vec4 p3 = pt(i + 2);\n  float f2 = f * f;\n  float f3 = f2 * f;\n  return 0.5 * ((2.0 * p1) + (-p0 + p2) * f + (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * f2\n    + (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * f3);\n}\n\nvec2 place(vec4 c) { return vec2(c.x * uView.x, c.y - uScroll); }\n\nvec3 strandAt(float id, float t, out vec3 info) {\n  vec4 c = spline(t);\n  vec2 p = place(c);\n  vec2 q = place(spline(t + 0.0004));\n  vec2 tg = q - p;\n  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);\n  vec2 nr = vec2(-tg.y, tg.x);\n  float r1 = h1(id + 0.13);\n  float r2 = h1(id + 1.71);\n  float r3 = h1(id + 3.37);\n  float r4 = h1(id + 5.93);\n  float r8 = h1(id + 13.7);\n  float r9 = h1(id + 17.3);\n  float n = (r1 + r2 + r3) / 1.5 - 1.0;\n  float z = (r4 - 0.5) * 2.0;\n  float along = c.y + c.x * uView.x;\n  float pace = 1.0 + uDrift * (r8 - 0.5) * 1.2;\n  float th = along * 0.002 * (1.0 + uDrift * (r9 - 0.5) * 0.3) + uTime * 0.25 * pace\n    + r2 * (0.5 + uDrift * 2.6);\n  float width = c.z * uSpread;\n  float breadth = width * uView.x * (1.0 + 0.25 * sin(uTime * 0.4 + along * 0.0045));\n  float sway = sin(along * 0.006 + uTime * 0.23) * mix(6.0, 30.0, smoothstep(0.02, 0.2, width));\n  float ct = cos(th);\n  float st = sin(th);\n  float depth = clamp((z * 0.55 * ct - n * st) / 1.15, -1.0, 1.0);\n  float lat = sway + breadth * (n * ct + z * 0.55 * st) * (1.0 + uDepth * 0.35 * depth);\n  lat += sin(along * 0.006 * (1.0 + uDrift * (r9 - 0.5) * 0.3) + uTime * (0.6 + 0.5 * r1) * pace\n    + r1 * 6.283) * 12.0 * (0.3 + r3) * (1.0 + uDrift * 0.5);\n  info = vec3(max(c.w, 0.0), width, along);\n  return vec3(p + nr * lat, depth);\n}\n\nvoid main() {\n  float id = float(gl_VertexID);\n  float sid = floor(h1(id + 0.5) * uStrands);\n  float r = h1(id + 2.3);\n  float r2 = h1(id + 4.1);\n  float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2)));\n  vec3 info;\n  vec3 a = strandAt(sid, t, info);\n  vec2 off = (vec2(h1(id + 6.1), h1(id + 8.3)) - 0.5) * (24.0 + (150.0 + info.y * uView.x) * h1(id + 9.7));\n  vec2 res = uView * uDpr;\n  vec2 px = (a.xy + off) * uDpr;\n  gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0);\n  gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr;\n  float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0));\n  /* By the root of the ribbon's brightness, so specks show along a dim ribbon\n     as well as round a bright bend. */\n  vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * sqrt(info.x) * 0.8;\n}\n";
 export declare const DUST_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec3 vColor;\nuniform float uScale;\nout vec4 outColor;\nvoid main() {\n  vec2 c = gl_PointCoord - 0.5;\n  outColor = vec4(vColor * exp(-dot(c, c) * 16.0) * uScale, 1.0);\n}\n";
 /** One triangle over the whole target, from three vertex ids and no buffer. */
 export declare const QUAD_VERTEX = "#version 300 es\nout vec2 vUv;\nvoid main() {\n  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);\n  vUv = p;\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}\n";
@@ -19,4 +19,4 @@ export declare const BLUR_FRAGMENT = "#version 300 es\nprecision highp float;\ni
  * the same energy darkens the ground toward the peak as ink. A step of noise
  * under a code value hides the banding a slow gradient shows on eight bits.
  */
-export declare const COMPOSITE_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uScene;\nuniform sampler2D uNear;\nuniform sampler2D uFar;\nuniform vec3 uGround;\nuniform vec3 uInk;\nuniform float uLight;\nuniform float uGain;\nout vec4 outColor;\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main() {\n  vec3 e = texture(uScene, vUv).rgb + texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9;\n  e *= uGain;\n  vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);\n  float lum = dot(e, vec3(0.3, 0.55, 0.15));\n  vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4));\n  vec3 c = mix(dark, light, uLight);\n  c += (hash(gl_FragCoord.xy) - 0.5) / 255.0;\n  outColor = vec4(c, 1.0);\n}\n";
+export declare const COMPOSITE_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uScene;\nuniform sampler2D uNear;\nuniform sampler2D uFar;\nuniform vec3 uGround;\nuniform vec3 uInk;\nuniform float uLight;\nuniform float uGain;\nuniform float uBloom;\nout vec4 outColor;\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main() {\n  vec3 e = texture(uScene, vUv).rgb + (texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9) * uBloom;\n  e *= uGain;\n  vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);\n  float lum = dot(e, vec3(0.3, 0.55, 0.15));\n  vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4));\n  vec3 c = mix(dark, light, uLight);\n  c += (hash(gl_FragCoord.xy) - 0.5) / 255.0;\n  outColor = vec4(c, 1.0);\n}\n";

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. */

package/dist/timeline/root/timeline-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: flex;flex-direction: column;}:host([layout="opposite"]) {--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);--_timeline-content-column: 3;--_timeline-rail-column: 2;--_timeline-time-align: end;--_timeline-time-column: 1;--_timeline-time-row: 2;}:host([layout="alternate"]) {--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);--_timeline-content-column: 3;--_timeline-even-align: end;--_timeline-even-column: 1;--_timeline-rail-column: 2;--_timeline-time-column: 3;}:host([orientation="horizontal"]) {--_timeline-arrive-display: none;--_timeline-columns: minmax(0, 1fr);--_timeline-content-block-end: var(--helix-space-none);--_timeline-content-column: 1;--_timeline-content-inline-end: var(--timeline-gap, var(--helix-space-lg));--_timeline-content-row: 3;--_timeline-direction: row;--_timeline-entry-flex: 1 1 0;--_timeline-even-align: initial;--_timeline-even-column: initial;--_timeline-leave-align: center;--_timeline-leave-block-size: var(--timeline-rail-size, var(--helix-border-thin));--_timeline-leave-column: 2;--_timeline-leave-inline-size: auto;--_timeline-leave-justify: stretch;--_timeline-leave-margin-block: var(--helix-space-none);--_timeline-leave-row: 1;--_timeline-marker-row: 1;--_timeline-rail-align: center;--_timeline-rail-column: 1;--_timeline-rail-columns: auto minmax(0, 1fr);--_timeline-rail-justify: start;--_timeline-rail-row: 1;--_timeline-rail-rows: auto;--_timeline-rows: auto auto minmax(0, 1fr);--_timeline-time-align: initial;--_timeline-time-column: 1;--_timeline-time-row: 2;flex-direction: row;}:host([orientation="horizontal"]) ::slotted(*) {flex: 1 1 0;min-inline-size: 0;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;}:host([layout="opposite"]) {--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);--_timeline-content-column: 3;--_timeline-rail-column: 2;--_timeline-time-align: end;--_timeline-time-column: 1;--_timeline-time-row: 2;}:host([layout="alternate"]) {--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);--_timeline-content-column: 3;--_timeline-even-align: end;--_timeline-even-column: 1;--_timeline-rail-column: 2;--_timeline-time-column: 3;}:host([orientation="horizontal"]) {--_timeline-arrive-display: none;--_timeline-columns: minmax(0, 1fr);--_timeline-content-block-end: var(--helix-space-none);--_timeline-content-column: 1;--_timeline-content-inline-end: var(--timeline-gap, var(--helix-space-lg));--_timeline-content-row: 3;--_timeline-direction: row;--_timeline-entry-flex: 1 1 0;--_timeline-even-align: initial;--_timeline-even-column: initial;--_timeline-leave-align: center;--_timeline-leave-block-size: var(--timeline-rail-size, var(--helix-border-thin));--_timeline-leave-column: 2;--_timeline-leave-inline-size: auto;--_timeline-leave-justify: stretch;--_timeline-leave-margin-block: var(--helix-space-none);--_timeline-leave-row: 1;--_timeline-marker-row: 1;--_timeline-rail-align: center;--_timeline-rail-column: 1;--_timeline-rail-columns: auto minmax(0, 1fr);--_timeline-rail-justify: start;--_timeline-rail-row: 1;--_timeline-rail-rows: auto;--_timeline-rows: auto auto minmax(0, 1fr);--_timeline-time-align: initial;--_timeline-time-column: 1;--_timeline-time-row: 2;flex-direction: row;}:host([orientation="horizontal"]) ::slotted(*) {flex: 1 1 0;min-inline-size: 0;}[part="loading"] {color: var(--timeline-time-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-block-start: var(--timeline-gap, var(--helix-space-lg));}:host([orientation="horizontal"]) [part="loading"] {padding-block-start: var(--helix-space-none);}@media print {:host {print-color-adjust: economy;}}`);

package/dist/virtual-list/reorder/index.d.ts

@@ -0,0 +1 @@
+export { reorderVirtualList, VirtualListReorderController, } from '@fusion.dev/helix-headless/virtual-list/reorder';

package/dist/virtual-list/reorder/index.js

@@ -0,0 +1,5 @@
+import { reorderVirtualList } from '@fusion.dev/helix-headless/virtual-list/reorder';
+import { HelixVirtualList } from '../root/virtual-list-root.js';
+import { styles } from './virtual-list-reorder.css.js';
+reorderVirtualList(HelixVirtualList, styles);
+export { reorderVirtualList, VirtualListReorderController, } from '@fusion.dev/helix-headless/virtual-list/reorder';

package/dist/virtual-list/reorder/virtual-list-reorder.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/virtual-list/reorder/virtual-list-reorder.css.js

@@ -0,0 +1,12 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`::slotted([data-index]) {cursor: grab;user-select: none;}::slotted([data-dragging]) {opacity: var(--virtual-list-dragging-opacity, 0.5);}::slotted([data-drop-before]) {box-shadow: inset 0 var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0
+var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}::slotted([data-drop-after]) {box-shadow: inset 0 calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick)))
+0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal)) ::slotted([data-drop-before]) {box-shadow: inset var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0 0
+var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal)) ::slotted([data-drop-after]) {box-shadow: inset calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick))) 0
+0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal):dir(rtl)) ::slotted([data-drop-before]) {box-shadow: inset calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick))) 0
+0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal):dir(rtl)) ::slotted([data-drop-after]) {box-shadow: inset var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0 0
+var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}[popover] {background-color: var(
+--virtual-list-drag-preview-background-color,
+var(--helix-color-surface-raised)
+);border: var(--virtual-list-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--virtual-list-drag-preview-border-color, var(--helix-color-border));border-radius: var(--virtual-list-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--virtual-list-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--virtual-list-drag-preview-opacity, 0.9);}[data-reorder-live] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}`);

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -24,6 +24,15 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --virtual-list-block-size - How tall the scrolling box is. A list that runs across is as tall as its rows unless you set it.
  * @cssproperty --virtual-list-disabled-opacity - How faint a row `disabled-keys` names is drawn.
+ * @cssproperty --virtual-list-drag-preview-background-color - The fill behind the copy of a row a pointer drags, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported.
+ * @cssproperty --virtual-list-drag-preview-border-color - The color of the edge around the copy of a row a pointer drags.
+ * @cssproperty --virtual-list-drag-preview-border-width - The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it.
+ * @cssproperty --virtual-list-drag-preview-opacity - The opacity of the copy of a row a pointer drags.
+ * @cssproperty --virtual-list-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
+ * @cssproperty --virtual-list-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
+ * @cssproperty --virtual-list-dragging-opacity - The opacity of a row being dragged, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported.
+ * @cssproperty --virtual-list-drop-indicator-color - The color of the line where a dragged row would land.
+ * @cssproperty --virtual-list-drop-indicator-size - The thickness of the line where a dragged row would land.
  * @cssproperty --virtual-list-empty-color - The color of the text in the row shown when there are no items.
  * @cssproperty --virtual-list-empty-padding - The space around the text in the row shown when there are no items.
  * @cssproperty --virtual-list-loading-color - The color of the text in the row drawn while `loading` is set.