@fusion.dev/helix 0.181.1 → 0.182.0

package/dist/strands/path.js

@@ -1,7 +1,7 @@
 export const MAX_POINTS = 96;
 const NARROW = 760;
-const GLOW = { bend: 1, ribbon: 0.36, waves: 0.7 };
-const WIDTH = { bend: 0.12, ribbon: 0.24, waves: 0.06 };
+const GLOW = { bend: 1, ribbon: 0.36, sweep: 0.8, waves: 0.7 };
+const WIDTH = { bend: 0.12, ribbon: 0.18, sweep: 0.16, waves: 0.06 };
 const BEND_AT = 0.5;
 const BEND_EXIT = 0.3;
 export const TURN = 0.5;
@@ -9,13 +9,13 @@ const bend = (top, height, at, narrow, width, reach) => {
     const x = narrow ? Math.max(at, 0.8) : at;
     const y = top + height * 0.58;
     const out = (down) => x + (down * down * height) / (2 * TURN) / width;
+    const pinch = (down) => 1 - Math.exp(-((down / 0.32) ** 2));
     const points = [];
     for (let step = -7; step * 0.15 <= reach + 1e-9; step++) {
         const down = step * 0.15;
         const upper = down < 0;
-        const wide = upper
-            ? 0.02 + (WIDTH.bend - 0.02) * Math.min(1, -down / 0.6)
-            : 0.02 + (WIDTH.bend * 1.4 - 0.02) * (down / reach);
+        const far = upper ? WIDTH.bend : WIDTH.bend + WIDTH.bend * 0.4 * (down / reach);
+        const wide = 0.02 + (far - 0.02) * pinch(down);
         const glow = upper ? Math.max(0, 1 + down * 1.07) : 1 - down * 0.73;
         points.push([out(down), y + down * height, wide, GLOW.bend * glow]);
     }
@@ -55,7 +55,17 @@ const wave = (y, height, fromRight, narrow, width, from) => {
     }
     return points;
 };
-const swingOf = (height, width, narrow) => Math.min(narrow ? 0.26 : 0.3, (height * TURN) / width);
+export const SPREAD = 1.35;
+const REACH = 1.3;
+const WOBBLE = 40;
+const reachOf = (wide, width) => wide * SPREAD * width * REACH + WOBBLE;
+const PERIOD = 1.7;
+export const SHAPE = { lean: 0.1, period: 1.4, sweep: 0.4, swing: 0.6 };
+const swingOf = (height, width, narrow, shape = SHAPE) => {
+    const reach = reachOf((narrow ? 0.45 : WIDTH.ribbon) * 1.1, width);
+    const gentle = (PERIOD * shape.period * height) ** 2 / (Math.PI ** 2 * reach * 1.15);
+    return Math.min((narrow ? 0.26 : 0.3) * shape.swing, (height * TURN) / width, gentle / width);
+};
 const RIBBON_STEP = 0.35;
 const bridge = (from, to, first, last) => {
     const length = to[1] - from[1];
@@ -82,15 +92,15 @@ const bridge = (from, to, first, last) => {
     }
     return out;
 };
-const ribbon = (from, to, height, at, phase, narrow, width) => {
+const ribbon = (from, to, height, at, phase, narrow, width, shape = SHAPE) => {
     const points = [];
     const step = height * RIBBON_STEP;
-    const swing = swingOf(height, width, narrow);
+    const swing = swingOf(height, width, narrow, shape);
     const wide = narrow ? 0.45 : WIDTH.ribbon;
     const glow = narrow ? GLOW.ribbon * 0.65 : GLOW.ribbon;
     let a = phase;
     for (let y = from; y < to; y += step) {
-        a += (step / (1.7 * height)) * Math.PI;
+        a += (step / (PERIOD * shape.period * height)) * Math.PI;
         points.push([at + swing * Math.sin(a), y, wide * (0.8 + 0.3 * Math.sin(a * 0.63 + 0.4)), glow]);
     }
     return { phase: a, points };
@@ -103,12 +113,77 @@ export const boxPath = (variant, at, height, width) => {
     if (variant === 'waves') {
         return wave(height * 0.5, height, false, narrow, width);
     }
+    if (variant === 'sweep') {
+        return pagePath([{ at, height: height * 0.6, left: 0.08, right: 0.92, top: height * 0.4, variant: 'sweep' }], 'ribbon', width, height, height);
+    }
     const start = -height * 0.4;
     const lead = [at ?? 0.5, start - height * 0.4, WIDTH.ribbon, 0];
     const body = ribbon(start, height * 1.4, height, at ?? 0.5, 0, narrow, width).points.map(([x, y, w]) => [x, y, w, narrow ? GLOW.ribbon * 0.65 * 1.4 : GLOW.ribbon * 1.4]);
     return [lead, ...body];
 };
-export const pagePath = (stops, fill, width, height, page) => {
+const tightestIn = (points, i, width) => {
+    const n = points.length;
+    const at = (k, c) => points[Math.max(0, Math.min(n - 1, k))]?.[c] ?? 0;
+    const sample = (f) => {
+        const along = (c) => catmull(at(i - 1, c), at(i, c), at(i + 1, c), at(i + 2, c), f);
+        return [along(0) * width, along(1), along(2), along(3)];
+    };
+    let radius = Number.POSITIVE_INFINITY;
+    let reach = 0;
+    for (let k = 1; k < 8; k++) {
+        const [ax, ay] = sample((k - 0.5) / 8);
+        const [bx, by, wide, glow] = sample(k / 8);
+        const [cx, cy] = sample((k + 0.5) / 8);
+        if (glow < 0.1 || bx < -0.1 * width || bx > 1.1 * width) {
+            continue;
+        }
+        const area = Math.abs((bx - ax) * (cy - ay) - (by - ay) * (cx - ax)) / 2;
+        const r = area < 1e-6
+            ? Number.POSITIVE_INFINITY
+            : (Math.hypot(bx - ax, by - ay) *
+                Math.hypot(cx - bx, cy - by) *
+                Math.hypot(cx - ax, cy - ay)) /
+                (4 * area);
+        if (r < radius) {
+            radius = r;
+            reach = reachOf(Math.max(0, wide), width);
+        }
+    }
+    return { radius, reach };
+};
+const relax = (points, width, height, kept) => {
+    const out = points.map((point) => [...point]);
+    const floor = 0.3 * Math.min(width, height);
+    const ease = (i) => {
+        const a = out[i - 1];
+        const b = out[i];
+        const c = out[i + 1];
+        if (a && b && c) {
+            out[i] = [b[0] + ((a[0] + c[0]) / 2 - b[0]) / 4, b[1], b[2], b[3]];
+        }
+    };
+    for (let pass = 0; pass < 80; pass++) {
+        let eased = false;
+        for (let i = 1; i < out.length - 2; i++) {
+            if (kept.has(i) || kept.has(i + 1)) {
+                continue;
+            }
+            const { radius, reach } = tightestIn(out, i, width);
+            if (radius < Math.max(reach * 1.1, floor)) {
+                ease(i);
+                ease(i + 1);
+                eased = true;
+            }
+        }
+        if (!eased) {
+            break;
+        }
+    }
+    return out;
+};
+export const pagePath = (stops, fill, width, height, page, shape = SHAPE) => {
+    const period = PERIOD * shape.period;
+    const home = 0.5 + shape.lean;
     const narrow = width < NARROW;
     const placed = [...stops].sort((one, two) => one.top - two.top);
     if (placed.length === 0) {
@@ -117,26 +192,30 @@ export const pagePath = (stops, fill, width, height, page) => {
                 placed.push({ at: undefined, height, top: y, variant: 'waves' });
             }
         }
-        else if (fill === 'bend') {
-            placed.push({ at: undefined, height, top: 0, variant: 'bend' });
+        else if (fill === 'bend' || fill === 'sweep') {
+            placed.push({ at: undefined, height, top: 0, variant: fill });
         }
     }
     const points = [[0.6, -height * 0.9, WIDTH.ribbon, 0]];
-    const turn = (RIBBON_STEP / 1.7) * Math.PI;
+    const turn = (RIBBON_STEP / period) * Math.PI;
     let phase = 1.2;
     let cursor = 0;
     let fromRight = true;
     let previous;
     let joined;
+    let axis = home;
+    let carried = false;
+    const kept = new Set();
     const gap = (to, next) => {
-        if (to - cursor < height * 0.7) {
+        if (to - cursor < height * (carried ? 0.4 : 0.7)) {
             return;
         }
-        if (previous === 'waves' && next === 'waves' && to - cursor < height * 1.5) {
+        if (previous === 'waves' && next === 'waves' && !carried && to - cursor < height * 1.5) {
             return;
         }
         const end = next === 'waves' ? to - height * 0.95 : to - height * 0.45;
-        const stretch = ribbon(cursor + height * 0.2, end, height, 0.5, phase, narrow, width);
+        const stretch = ribbon(cursor + height * 0.2, end, height, axis, phase, narrow, width, shape);
+        axis = home;
         phase = stretch.phase;
         let run = stretch.points;
         let heading;
@@ -152,7 +231,7 @@ export const pagePath = (stops, fill, width, height, page) => {
                 }
             }
         }
-        if (previous === 'waves' && run.length > 1) {
+        if (previous === 'waves' && !carried && run.length > 1) {
             run = run.map((point, k) => k < 3 ? [point[0], point[1], point[2], point[3] * Math.max(0, k - 1) * 0.5] : point);
         }
         points.push(...run);
@@ -162,26 +241,77 @@ export const pagePath = (stops, fill, width, height, page) => {
             joined = last[0];
         }
     };
-    for (const stop of placed) {
+    const carryFrom = (way, from, light, spacing) => {
+        const bottom = points.at(-1);
+        const swing = swingOf(height, width, narrow, shape);
+        const wide = narrow ? 0.45 : WIDTH.ribbon;
+        axis = bottom[0] - way * swing;
+        let phaseAt = way > 0 ? Math.PI / 2 : Math.PI * 1.5;
+        let y = bottom[1];
+        let gap = spacing;
+        const ramp = Math.ceil(Math.log((height * RIBBON_STEP) / spacing) / Math.log(1.33));
+        let k = 0;
+        while (gap < height * RIBBON_STEP) {
+            y += gap;
+            phaseAt += (gap / (period * height)) * Math.PI;
+            k += 1;
+            const f = Math.min(1, k / Math.max(ramp, 1));
+            points.push([
+                axis + swing * Math.sin(phaseAt),
+                y,
+                from + (wide - from) * f,
+                light + (GLOW.ribbon - light) * f,
+            ]);
+            gap *= 1.33;
+        }
+        phase = phaseAt;
+        cursor = y + height * RIBBON_STEP - height * 0.2;
+        fromRight = way > 0;
+        carried = true;
+    };
+    const ribbonAfter = (from, next) => next !== undefined &&
+        next.top - from >= height * 0.7 &&
+        !(next.variant === 'waves' && next.top - from < height * 1.5);
+    for (const [index, stop] of placed.entries()) {
         joined = undefined;
-        gap(stop.top, stop.variant);
+        if (stop.variant !== 'sweep') {
+            gap(stop.top, stop.variant);
+        }
+        carried = false;
         if (stop.variant === 'bend') {
             const span = Math.min(stop.height, height);
             const at = stop.at ?? BEND_AT;
-            const slope = BEND_EXIT / TURN;
-            const swing = swingOf(height, width, narrow);
-            const steepest = (swing * width * Math.PI) / (1.7 * height);
+            const swing = swingOf(height, width, narrow, shape);
+            const steepest = (swing * width * Math.PI) / (period * height);
+            const reach = Math.max(0.15, Math.floor(Math.min(BEND_EXIT, steepest * TURN) / 0.15) * 0.15);
+            const slope = reach / TURN;
             const a = Math.acos(Math.min(1, slope / steepest));
-            const x = 0.5 + swing * Math.sin(a);
-            const bent = bend(stop.top, span, at, narrow, width, narrow ? 0.6 : BEND_EXIT);
+            const bent = bend(stop.top, span, at, narrow, width, narrow ? 0.6 : reach);
             const exit = bent.at(-1);
             points.push(...bent);
-            if (!narrow && x > exit[0]) {
-                const drop = Math.max(height * 0.3, ((x - exit[0]) * width) / slope);
-                const start = [x, exit[1] + drop, WIDTH.ribbon, GLOW.ribbon];
-                points.push(...bridge(exit, start, span * 0.15, height * RIBBON_STEP));
-                cursor = start[1] - height * 0.2;
-                phase = a - turn;
+            if (!narrow) {
+                axis = Math.min(1.08 - swing, Math.max(swing - 0.08, exit[0] - swing * Math.sin(a)));
+                let phaseAt = Math.asin(Math.max(-1, Math.min(1, (exit[0] - axis) / swing)));
+                phaseAt = Math.max(phaseAt, Math.min(a, Math.PI / 2));
+                let y = exit[1];
+                let spacing = span * 0.15;
+                let k = 0;
+                const steps = Math.ceil(Math.log((height * RIBBON_STEP) / spacing) / Math.log(1.33));
+                while (spacing < height * RIBBON_STEP) {
+                    y += spacing;
+                    phaseAt += (spacing / (period * height)) * Math.PI;
+                    k += 1;
+                    const f = Math.min(1, k / Math.max(steps, 1));
+                    points.push([
+                        axis + swing * Math.sin(phaseAt),
+                        y,
+                        exit[2] + (WIDTH.ribbon - exit[2]) * f,
+                        exit[3] + (GLOW.ribbon - exit[3]) * f,
+                    ]);
+                    spacing *= 1.33;
+                }
+                cursor = y + height * RIBBON_STEP - height * 0.2;
+                phase = phaseAt;
             }
             else {
                 cursor = exit[1] + height * 0.1;
@@ -189,20 +319,83 @@ export const pagePath = (stops, fill, width, height, page) => {
             }
             fromRight = true;
         }
+        else if (stop.variant === 'sweep') {
+            const right = (stop.at ?? 0.9) >= 0.5;
+            const way = right ? -1 : 1;
+            const from = right ? 0.98 : 0.02;
+            const land = right ? (stop.left ?? 0.06) : (stop.right ?? 0.94);
+            const full = narrow ? 0.3 : WIDTH.sweep;
+            const glow = narrow ? GLOW.sweep * 0.65 : GLOW.sweep;
+            const begins = Math.min(stop.top, 0) - height * 0.35;
+            const descent = stop.top - begins;
+            const across = (land - from) * width;
+            const allowed = (radius) => Math.max(0.006, Math.min(full, (radius / 1.15 - WOBBLE) / (SPREAD * width * REACH)));
+            const radiusAt = (f) => {
+                const slope = ((across * Math.PI) / (2 * descent)) * Math.sin(Math.PI * f);
+                const bend = Math.abs(((across * Math.PI ** 2) / (2 * descent ** 2)) * Math.cos(Math.PI * f));
+                return bend < 1e-9 ? Number.POSITIVE_INFINITY : (1 + slope * slope) ** 1.5 / bend;
+            };
+            const spacing = height * 0.08;
+            const count = Math.max(8, Math.ceil(descent / spacing));
+            points.push([from, begins - height * 0.4, allowed(radiusAt(0)), 0]);
+            for (let k = 0; k <= count; k++) {
+                const f = k / count;
+                kept.add(points.length);
+                points.push([
+                    from + ((land - from) * (1 - Math.cos(Math.PI * f))) / 2,
+                    begins + descent * f,
+                    allowed(radiusAt(f)),
+                    glow * Math.min(1, (k + 1) / 3),
+                ]);
+            }
+            carryFrom(way, allowed(radiusAt(1)), glow, descent / count);
+        }
         else if (stop.variant === 'waves') {
-            const crossing = wave(stop.top, height, fromRight, narrow, width, joined);
+            const carries = joined !== undefined && ribbonAfter(stop.top + height * 0.5, placed[index + 1]);
             const end = points.at(-1);
-            const lead = crossing[0];
-            if (joined !== undefined && end && lead) {
-                points.push(...bridge(end, lead, height * RIBBON_STEP, height * 0.26));
+            if (carries && end) {
+                const way = end[0] < 0.5 ? 1 : -1;
+                const thin = narrow ? WIDTH.waves * 2 : WIDTH.waves;
+                const glow = narrow ? GLOW.waves * 0.65 : GLOW.waves;
+                const blend = (a, b, f) => a + (b - a) * f;
+                const from = end[0];
+                const to = 0.5 + way * shape.sweep;
+                const amplitude = (Math.abs(to - from) * width) / 2;
+                const radius = Math.max(reachOf(thin, width), 0.3 * Math.min(width, height)) * 1.15;
+                const descent = Math.PI * Math.sqrt(radius * amplitude);
+                const begins = Math.max(end[1] + height * 0.3, stop.top - descent / 2);
+                const spacing = height * 0.12;
+                const top = [from, begins, thin, glow * 0.7];
+                const mirror = ([x, y, w, g]) => [x, -y, w, g];
+                points.push(...bridge(mirror(top), mirror(end), spacing, height * RIBBON_STEP)
+                    .map(mirror)
+                    .reverse(), top);
+                const count = Math.max(4, Math.ceil(descent / spacing));
+                for (let k = 1; k <= count; k++) {
+                    const f = k / count;
+                    points.push([
+                        from + ((to - from) * (1 - Math.cos(Math.PI * f))) / 2,
+                        begins + descent * f,
+                        thin,
+                        blend(glow * 0.7, glow, Math.sin(Math.PI * f)),
+                    ]);
+                }
+                carryFrom(way, thin, glow * 0.7, spacing);
+            }
+            else {
+                const crossing = wave(stop.top, height, fromRight, narrow, width, joined);
+                const lead = crossing[0];
+                if (joined !== undefined && end && lead) {
+                    points.push(...bridge(end, lead, height * RIBBON_STEP, height * 0.26));
+                }
+                points.push(...crossing);
+                phase =
+                    joined === undefined
+                        ? (fromRight ? Math.PI * 1.5 : Math.PI / 2) - turn
+                        : (fromRight ? Math.PI / 2 : Math.PI * 1.5) - turn;
+                fromRight = joined === undefined ? !fromRight : fromRight;
+                cursor = stop.top + height * (joined === undefined ? 0.35 : 0.5);
             }
-            points.push(...crossing);
-            phase =
-                joined === undefined
-                    ? (fromRight ? Math.PI * 1.5 : Math.PI / 2) - turn
-                    : (fromRight ? Math.PI / 2 : Math.PI * 1.5) - turn;
-            fromRight = joined === undefined ? !fromRight : fromRight;
-            cursor = stop.top + height * (joined === undefined ? 0.35 : 0.5);
         }
         else {
             const y = stop.top + Math.min(stop.height, height) / 2;
@@ -218,7 +411,7 @@ export const pagePath = (stops, fill, width, height, page) => {
     const before = points.at(-2) ?? last;
     const on = [2 * last[0] - before[0], 2 * last[1] - before[1], last[2], 0];
     points.push(on, [on[0], Math.max(on[1], page) + height, last[2], 0]);
-    return points.slice(0, MAX_POINTS);
+    return relax(points.slice(0, MAX_POINTS), width, height, kept);
 };
 export const catmull = (p0, p1, p2, p3, f) => {
     const f2 = f * f;
@@ -229,6 +422,26 @@ export const catmull = (p0, p1, p2, p3, f) => {
             (2 * p0 - 5 * p1 + 4 * p2 - p3) * f2 +
             (-p0 + 3 * p1 - 3 * p2 + p3) * f3));
 };
+export const arcLengths = (points, width) => {
+    const n = points.length;
+    const out = new Float32Array(n);
+    const at = (i, c) => points[Math.max(0, Math.min(n - 1, i))]?.[c] ?? 0;
+    let total = 0;
+    for (let i = 0; i < n - 1; i++) {
+        let x = at(i, 0) * width;
+        let y = at(i, 1);
+        for (let k = 1; k <= 16; k++) {
+            const f = k / 16;
+            const nx = catmull(at(i - 1, 0), at(i, 0), at(i + 1, 0), at(i + 2, 0), f) * width;
+            const ny = catmull(at(i - 1, 1), at(i, 1), at(i + 1, 1), at(i + 2, 1), f);
+            total += Math.hypot(nx - x, ny - y);
+            x = nx;
+            y = ny;
+        }
+        out[i + 1] = total;
+    }
+    return out;
+};
 export const lookup = (points) => {
     const n = points.length;
     const samples = Math.max(1, (n - 1) * 24);

package/dist/strands/renderer.d.ts

@@ -1,4 +1,6 @@
 import type { StrandsPalette } from './palette.js';
+import { MAX_QUIET } from './shader.js';
+export { MAX_QUIET };
 /** The most strands a ribbon draws, at `density` 1. */
 export declare const MAX_STRANDS = 340;
 /** The fewest, at `density` 0. Fewer stops reading as a ribbon at all. */
@@ -19,6 +21,8 @@ export interface StrandsFrame {
     depth: number;
     /** How many specks of dust drift around the strands. */
     dust: number;
+    /** How far along the path each point is, in CSS pixels, padded like `points`. */
+    lengths: Float32Array;
     /** How differently each strand moves, from `0`, as one, to `1`. */
     drift: number;
     /** The device pixels per CSS pixel the buffer was sized at. */
@@ -27,6 +31,12 @@ export interface StrandsFrame {
     gain: number;
     /** The path, four floats a point, padded to the uniform array's length. */
     points: Float32Array;
+    /**
+     * The rects the light dims behind, as left, top, right and bottom in the
+     * path's pixels, four floats each for `MAX_QUIET` rects. An unused one is
+     * all zeros.
+     */
+    quiet: Float32Array;
     /** The stretch of the path on screen, as a range of its parameter. */
     range: readonly [number, number];
     /** How far the page is scrolled, in CSS pixels, or `0` inside a box. */

package/dist/strands/renderer.js

@@ -1,10 +1,11 @@
-import { BLUR_FRAGMENT, COMPOSITE_FRAGMENT, DOWN_FRAGMENT, DUST_FRAGMENT, DUST_VERTEX, LINE_FRAGMENT, LINE_VERTEX, QUAD_VERTEX, } from './shader.js';
+import { SPREAD } from './path.js';
+import { BLUR_FRAGMENT, COMPOSITE_FRAGMENT, DOWN_FRAGMENT, DUST_FRAGMENT, DUST_VERTEX, LINE_FRAGMENT, LINE_VERTEX, MAX_QUIET, QUAD_VERTEX, } from './shader.js';
+export { MAX_QUIET };
 export const MAX_STRANDS = 340;
 export const MIN_STRANDS = 60;
 const SEGMENTS = 320;
 export const DUST = 600;
 export const MAX_DUST = DUST * 4;
-const SPREAD = 1.35;
 const BLOOM = 0.75;
 const GAIN = 1.615;
 export class StrandsRenderer {
@@ -172,6 +173,8 @@ export class StrandsRenderer {
         const { gl } = this;
         gl.useProgram(program.program);
         gl.uniform4fv(program.uniforms.get('uPts') ?? null, frame.points);
+        gl.uniform4fv(program.uniforms.get('uLen') ?? null, frame.lengths);
+        gl.uniform4fv(program.uniforms.get('uQuiet') ?? null, frame.quiet);
         gl.uniform1i(program.uniforms.get('uCount') ?? null, frame.count);
         gl.uniform2f(program.uniforms.get('uView') ?? null, frame.view[0], frame.view[1]);
         gl.uniform1f(program.uniforms.get('uScroll') ?? null, frame.scroll);

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

@@ -15,9 +15,15 @@ import { type StrandsVariant } from '../path.js';
  * `--helix-color-background`. On a light page the light becomes ink, because
  * light added to near-white cannot be seen.
  *
- * **Three forms, set with `variant`.** `bend` turns bright strands through one tight point, with its
- * arms opening to the right. `ribbon`, the default, is a broad, soft ribbon in
- * long curves. `waves` is sharp strands crossing the full width.
+ * **Four forms, set with `variant`.** `bend` turns bright strands through one
+ * tight point, with its arms opening to the right. `ribbon`, the default, is a
+ * broad, soft ribbon in long curves. `sweep` enters at a top corner, the one
+ * `at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp
+ * strands crossing the full width.
+ *
+ * **Quiet behind words.** `quiet` names elements, such as a hero's words, that
+ * the light dims behind to a faint glow, so a bright ribbon can cross the page
+ * under them and they stay crisp.
  *
  * **In its own box, by default.** The element fills the box it is given, the
  * way an image does, and `at` places the bend's apex or the ribbon's axis across
@@ -103,9 +109,10 @@ export declare class HelixStrands extends HelixElement {
      */
     depth: number;
     /**
-     * How differently each strand moves, from `0`, the whole ribbon rolling and
-     * waving as one, to `1`, each strand at its own pace and angle, crossing
-     * over the others. Clamped to that range.
+     * How differently the strands move across the ribbon, from `0`, the whole
+     * ribbon rolling and waving as one, to `1`, its edges flowing at their own
+     * pace past its middle. Neighbors always move together, so no strand leaves
+     * its lane. Clamped to that range.
      */
     drift: number;
     /**
@@ -116,6 +123,13 @@ export declare class HelixStrands extends HelixElement {
     dust: number;
     /** Overall brightness, as a multiplier on the light. */
     gain: number;
+    /**
+     * The ids of elements the light dims behind, separated by spaces, such as
+     * a hero's words. Inside each, the ribbon keeps a faint glow, so words over
+     * it stay crisp and nothing busy runs under them, and it eases back to full
+     * a short way past each edge. Up to four; ids that name nothing are skipped.
+     */
+    quiet?: string;
     /**
      * The share of strands drawn out of focus where the ribbon is wide, from `0`,
      * every strand sharp, to `1`, every one soft. Clamped to that range. A tight
@@ -165,6 +179,10 @@ export declare class HelixStrands extends HelixElement {
     /** The path, padded to the shader's array, and how many points are in use. */
     private readonly points;
     private count;
+    /** How far along the path each point is, in pixels, four to a slot as the shader reads them. */
+    private lengths;
+    /** The rects the light dims behind, in the path's pixels, from `quiet`. */
+    private readonly quietRects;
     /** In `travel`, the path's `y` at even steps of its parameter. */
     private table;
     /** In `travel`, the scroll position the ribbon is drawn at, easing toward the page's. */
@@ -223,6 +241,11 @@ export declare class HelixStrands extends HelixElement {
      * on any change that could move the path rather than working out which did.
      */
     private layout;
+    /**
+     * The rects of the elements `quiet` names: on the page in `travel`, where
+     * the path is laid in page pixels, and inside the box otherwise.
+     */
+    private measureQuiet;
     /** The stops inside, each with its target's place on the page. A stop naming nothing is skipped. */
     private placedStops;
     /**

package/dist/strands/root/strands-root.js

@@ -9,8 +9,8 @@ import { customElement, drawsInSoftware, elementById, HelixElement, HelixStrands
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { paletteOf, RESTING_PALETTE } from '../palette.js';
-import { boxPath, lookup, MAX_POINTS, pagePath, visibleRange, } from '../path.js';
-import { DUST, MAX_DUST, MAX_STRANDS, MIN_STRANDS, StrandsRenderer } from '../renderer.js';
+import { arcLengths, boxPath, lookup, MAX_POINTS, pagePath, visibleRange, } from '../path.js';
+import { DUST, MAX_DUST, MAX_QUIET, MAX_STRANDS, MIN_STRANDS, StrandsRenderer, } from '../renderer.js';
 import { styles } from './strands-root.css.js';
 const MAX_CANVAS_EDGE = 4096;
 const MAX_CANVAS_PIXELS = 4_194_304;
@@ -45,6 +45,8 @@ let HelixStrands = class HelixStrands extends HelixElement {
         this.box = { height: 1, width: 1 };
         this.points = new Float32Array(MAX_POINTS * 4);
         this.count = 0;
+        this.lengths = new Float32Array(MAX_POINTS);
+        this.quietRects = new Float32Array(MAX_QUIET * 4);
         this.table = new Float32Array(1);
         this.offset = 0;
         this.opened = false;
@@ -142,7 +144,10 @@ let HelixStrands = class HelixStrands extends HelixElement {
         if (changed.has('travel') && this.hasUpdated && this.canvas) {
             this.watchPage(this.travel);
         }
-        if (changed.has('variant') || changed.has('at') || changed.has('travel')) {
+        if (changed.has('variant') ||
+            changed.has('at') ||
+            changed.has('travel') ||
+            changed.has('quiet')) {
             this.layout();
         }
         this.paintOnce();
@@ -316,6 +321,28 @@ let HelixStrands = class HelixStrands extends HelixElement {
             this.points.set(point, i * 4);
         });
         this.count = path.length;
+        this.lengths.fill(0);
+        this.lengths.set(arcLengths(path, this.box.width));
+        this.measureQuiet();
+    }
+    measureQuiet() {
+        this.quietRects.fill(0);
+        const origin = this.travel ? { left: 0, top: -window.scrollY } : this.getBoundingClientRect();
+        let slot = 0;
+        for (const name of (this.quiet ?? '').split(/\s+/)) {
+            const target = name ? elementById(this, name) : null;
+            if (!target || slot >= MAX_QUIET) {
+                continue;
+            }
+            const rect = target.getBoundingClientRect();
+            this.quietRects.set([
+                rect.left - origin.left,
+                rect.top - origin.top,
+                rect.right - origin.left,
+                rect.bottom - origin.top,
+            ], slot * 4);
+            slot += 1;
+        }
     }
     placedStops() {
         const placed = [];
@@ -332,8 +359,10 @@ let HelixStrands = class HelixStrands extends HelixElement {
             placed.push({
                 at: Number.isFinite(at) ? at : undefined,
                 height: rect.height,
+                left: this.box.width ? rect.left / this.box.width : undefined,
+                right: this.box.width ? rect.right / this.box.width : undefined,
                 top: rect.top + scroll,
-                variant: variant === 'bend' || variant === 'waves' ? variant : 'ribbon',
+                variant: variant === 'bend' || variant === 'sweep' || variant === 'waves' ? variant : 'ribbon',
             });
         }
         return placed;
@@ -380,7 +409,9 @@ let HelixStrands = class HelixStrands extends HelixElement {
             drift: share(this.drift),
             dust: Math.round(Math.min(MAX_DUST, Math.max(0, this.dust * DUST))),
             gain: Math.max(0, this.gain),
+            lengths: this.lengths,
             points: this.points,
+            quiet: this.quietRects,
             range,
             scroll: this.travel ? this.offset : 0,
             softness: Math.min(1, Math.max(0, this.softness)),
@@ -472,6 +503,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixStrands.prototype, "gain", void 0);
+__decorate([
+    property()
+], HelixStrands.prototype, "quiet", void 0);
 __decorate([
     property({ type: Number })
 ], HelixStrands.prototype, "softness", void 0);