@fusion.dev/helix 0.172.0 → 0.174.0

package/dist/strands/palette.d.ts

@@ -26,7 +26,7 @@ export declare const RESTING_PALETTE: StrandsPalette;
  * above the element, and the token otherwise:
  *
  * - `color`: `--strands-glow`, or `primary`.
- * - `text-decoration-color`: `--strands-tint`, or `info`.
+ * - `text-decoration-color`: `--strands-tint`, or `accent`.
  * - `outline-color`: `--strands-ground`, or the background.
  * - `caret-color` and `column-rule-color`: `--strands-peak`, or the dark and
  *   the light page's own peak.

package/dist/strands/path.d.ts

@@ -7,7 +7,7 @@
  * screen are all arithmetic.
  */
 /** The three forms the ribbon takes. */
-export type StrandsVariant = 'fan' | 'ribbon' | 'waves';
+export type StrandsVariant = 'bend' | 'ribbon' | 'waves';
 /**
  * One point on the centerline: `x` as a share of the width, `y` in CSS pixels,
  * the ribbon's width as a share of the width, and its brightness from `0` to
@@ -38,6 +38,15 @@ export interface PlacedStop {
  * than forty screens long; a longer one keeps its first 96 points and fades.
  */
 export declare const MAX_POINTS = 96;
+/**
+ * The tightest any form turns, as a share of the box's height: the radius of
+ * its sharpest curve.
+ *
+ * Half the height. A bend's apex a few dozen pixels round kinked the strands
+ * that ran along its inside, and read as a fold in the light where every form
+ * is meant to be one sweep. `path.pure.spec.ts` measures it on every form.
+ */
+export declare const TURN = 0.5;
 /**
  * The ribbon drawn inside its own box, which is what an element without
  * `travel` shows.
@@ -45,18 +54,20 @@ export declare const MAX_POINTS = 96;
  * @param variant The form to draw.
  * @param at Where it sits across the box, as a share of the width. A wave
  *   crosses the whole width and does not read it.
- * @param height The box's height, in CSS pixels. Its width needs no
- *   argument: `x` is a share of it.
+ * @param height The box's height, in CSS pixels.
+ * @param width The box's width, in CSS pixels. `x` is a share of it, and a
+ *   bend's apex is drawn in pixels so it keeps its radius at any shape.
  */
-export declare const boxPath: (variant: StrandsVariant, at: number | undefined, height: number) => PathPoint[];
+export declare const boxPath: (variant: StrandsVariant, at: number | undefined, height: number, width: number) => PathPoint[];
 /**
  * The ribbon laid down a whole page, which is what an element with `travel`
  * shows.
  *
  * Each stop places its form at its target, in page order. Between two stops
  * the ribbon fills the gap with soft S-curves in `fill`'s place, except
- * between two waves, where it turns off screen so each wave reads alone.
- * Without stops, `fill` runs the length of the page: a fan opens the page and
+ * between two waves less than a screen and a half apart, where it turns off
+ * screen so each wave reads alone.
+ * Without stops, `fill` runs the length of the page: a bend opens the page and
  * a ribbon follows it, waves cross every screen and a third, and a ribbon
  * meanders the whole way. After a last wave the ribbon does not come back, so
  * the page ends on the wave.

package/dist/strands/path.js

@@ -1,37 +1,91 @@
 export const MAX_POINTS = 96;
 const NARROW = 760;
-const GLOW = { fan: 1, ribbon: 0.36, waves: 0.7 };
-const WIDTH = { fan: 0.07, ribbon: 0.24, waves: 0.06 };
-const FAN_AT = 0.4;
-const fan = (top, height, at, narrow) => {
+const GLOW = { bend: 1, ribbon: 0.36, waves: 0.7 };
+const WIDTH = { bend: 0.12, ribbon: 0.24, waves: 0.06 };
+const BEND_AT = 0.5;
+const BEND_EXIT = 0.3;
+export const TURN = 0.5;
+const bend = (top, height, at, narrow, width, reach) => {
     const x = narrow ? Math.max(at, 0.8) : at;
     const y = top + height * 0.58;
-    const arm = narrow ? 0.12 : 0.15;
-    return [
-        [x + 0.38, y - height * 0.73, WIDTH.fan, 0.2],
-        [x + arm, y - height * 0.3, WIDTH.fan * 0.5, 0.9],
-        [x, y, 0.005, GLOW.fan],
-        [x + arm, y + height * 0.3, WIDTH.fan * 0.5, 0.9],
-        [x + 0.45, y + height * 0.54, WIDTH.fan * 1.15, 0.7],
-    ];
+    const out = (down) => x + (down * down * height) / (2 * TURN) / width;
+    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 glow = upper ? Math.max(0, 1 + down * 1.07) : 1 - down * 0.73;
+        points.push([out(down), y + down * height, wide, GLOW.bend * glow]);
+    }
+    return points;
 };
-const wave = (y, height, fromRight, narrow) => {
+const wave = (y, height, fromRight, narrow, width, from) => {
     const w = narrow ? WIDTH.waves * 2 : WIDTH.waves;
     const glow = narrow ? GLOW.waves * 0.65 : GLOW.waves;
     const side = (share) => (fromRight ? 1 - share : share);
-    return [
-        [side(-0.15), y - height * 0.35, w, 0],
-        [side(-0.05), y, w, glow * 0.6],
-        [side(0.3), y + 18, w, glow],
-        [side(0.7), y - 18, w, glow],
-        [side(1.05), y, w, glow * 0.6],
-        [side(1.15), y + height * 0.35, w, 0],
-    ];
+    if (from !== undefined) {
+        const across = (share) => from + ((fromRight ? 0 : 1) - from) * share;
+        return [
+            [across(0.03), y - height * 0.62, WIDTH.ribbon * 0.7, GLOW.ribbon],
+            [across(0.12), y - height * 0.36, WIDTH.ribbon * 0.5, glow * 0.55],
+            [across(0.38), y - height * 0.1, w, glow],
+            [across(0.66), y + height * 0.04, w, glow],
+            [across(1), y + height * 0.14, w, glow * 0.6],
+            [across(1.5), y + height * 0.3, w, 0],
+        ];
+    }
+    const beyond = height / width;
+    const rise = Math.min(18, width / 80);
+    const span = 1 + 2 * beyond;
+    const steps = Math.ceil(span / ((height * 0.45) / width));
+    const points = [];
+    for (let k = 0; k <= steps; k++) {
+        const share = -beyond + (k / steps) * span;
+        const out = share < 0 ? -share / beyond : share > 1 ? (share - 1) / beyond : 0;
+        const lift = share < 0 ? -out * out : out * out;
+        const ripple = share >= 0 && share <= 1 ? rise * Math.sin(2 * Math.PI * share) : 0;
+        points.push([
+            side(share),
+            y + lift * height * 0.35 + ripple,
+            w,
+            glow * Math.max(0, 1 - out * 1.6),
+        ]);
+    }
+    return points;
 };
-const ribbon = (from, to, height, at, phase, narrow) => {
+const swingOf = (height, width, narrow) => Math.min(narrow ? 0.26 : 0.3, (height * TURN) / width);
+const RIBBON_STEP = 0.35;
+const bridge = (from, to, first, last) => {
+    const length = to[1] - from[1];
+    const gaps = [];
+    let gap = first;
+    let sum = 0;
+    while (sum + Math.min(gap, last) * 1.5 < length) {
+        gaps.push(Math.min(gap, last));
+        sum += Math.min(gap, last);
+        gap *= 1.33;
+    }
+    const scale = length / (sum + Math.min(gap, last));
+    const out = [];
+    let at = 0;
+    for (const one of gaps) {
+        at += one * scale;
+        const f = at / length;
+        out.push([
+            from[0] + (to[0] - from[0]) * f,
+            from[1] + (to[1] - from[1]) * f,
+            from[2] + (to[2] - from[2]) * f,
+            from[3] + (to[3] - from[3]) * f,
+        ]);
+    }
+    return out;
+};
+const ribbon = (from, to, height, at, phase, narrow, width) => {
     const points = [];
-    const step = height * 0.55;
-    const swing = narrow ? 0.26 : 0.3;
+    const step = height * RIBBON_STEP;
+    const swing = swingOf(height, width, narrow);
     const wide = narrow ? 0.45 : WIDTH.ribbon;
     const glow = narrow ? GLOW.ribbon * 0.65 : GLOW.ribbon;
     let a = phase;
@@ -41,17 +95,17 @@ const ribbon = (from, to, height, at, phase, narrow) => {
     }
     return { phase: a, points };
 };
-export const boxPath = (variant, at, height) => {
+export const boxPath = (variant, at, height, width) => {
     const narrow = false;
-    if (variant === 'fan') {
-        return fan(0, height, at ?? FAN_AT, narrow);
+    if (variant === 'bend') {
+        return bend(0, height, at ?? BEND_AT, narrow, width, 0.6);
     }
     if (variant === 'waves') {
-        return wave(height * 0.5, height, false, narrow);
+        return wave(height * 0.5, height, false, narrow, width);
     }
     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).points.map(([x, y, w]) => [x, y, w, narrow ? GLOW.ribbon * 0.65 * 1.4 : GLOW.ribbon * 1.4]);
+    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) => {
@@ -63,42 +117,92 @@ export const pagePath = (stops, fill, width, height, page) => {
                 placed.push({ at: undefined, height, top: y, variant: 'waves' });
             }
         }
-        else if (fill === 'fan') {
-            placed.push({ at: undefined, height, top: 0, variant: 'fan' });
+        else if (fill === 'bend') {
+            placed.push({ at: undefined, height, top: 0, variant: 'bend' });
         }
     }
     const points = [[0.6, -height * 0.9, WIDTH.ribbon, 0]];
+    const turn = (RIBBON_STEP / 1.7) * Math.PI;
     let phase = 1.2;
     let cursor = 0;
     let fromRight = true;
     let previous;
+    let joined;
     const gap = (to, next) => {
         if (to - cursor < height * 0.7) {
             return;
         }
-        if (previous === 'waves' && next === 'waves') {
+        if (previous === 'waves' && next === 'waves' && to - cursor < height * 1.5) {
             return;
         }
-        const stretch = ribbon(cursor + height * 0.2, to - height * 0.45, height, 0.5, phase, narrow);
+        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);
         phase = stretch.phase;
-        points.push(...stretch.points);
-        const last = stretch.points.at(-1);
+        let run = stretch.points;
+        let heading;
+        if (next === 'waves') {
+            for (let k = run.length - 2; k > 0; k--) {
+                const [one, two, three] = run.slice(k - 1, k + 2);
+                if ((two[0] - one[0]) * (three[0] - two[0]) <= 0) {
+                    run = run.slice(0, k + 1);
+                    break;
+                }
+                if (k === 1) {
+                    heading = three[0] < two[0];
+                }
+            }
+        }
+        if (previous === 'waves' && 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);
+        const last = run.at(-1);
         if (last) {
-            fromRight = last[0] > 0.5;
+            fromRight = heading ?? last[0] > 0.5;
+            joined = last[0];
         }
     };
     for (const stop of placed) {
+        joined = undefined;
         gap(stop.top, stop.variant);
-        if (stop.variant === 'fan') {
+        if (stop.variant === 'bend') {
             const span = Math.min(stop.height, height);
-            points.push(...fan(stop.top, span, stop.at ?? FAN_AT, narrow));
-            cursor = stop.top + span * 1.12;
+            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 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 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;
+            }
+            else {
+                cursor = exit[1] + height * 0.1;
+                phase = Math.PI / 2 - turn;
+            }
             fromRight = true;
         }
         else if (stop.variant === 'waves') {
-            points.push(...wave(stop.top, height, fromRight, narrow));
-            fromRight = !fromRight;
-            cursor = stop.top + height * 0.35;
+            const crossing = wave(stop.top, height, fromRight, narrow, width, joined);
+            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));
+            }
+            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;
@@ -111,7 +215,9 @@ export const pagePath = (stops, fill, width, height, page) => {
         gap(page + height * 0.4, undefined);
     }
     const last = points.at(-1) ?? [0.5, page, WIDTH.ribbon, 0];
-    points.push([last[0], Math.max(last[1], page) + height, last[2], 0]);
+    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);
 };
 export const catmull = (p0, p1, p2, p3, f) => {

package/dist/strands/renderer.d.ts

@@ -3,10 +3,24 @@ import type { StrandsPalette } from './palette.js';
 export declare const MAX_STRANDS = 340;
 /** The fewest, at `density` 0. Fewer stops reading as a ribbon at all. */
 export declare const MIN_STRANDS = 60;
+/** Specks of dust around the strands at a `dust` of `1`. */
+export declare const DUST = 600;
+/** The most specks a frame draws, at a `dust` of `4`. */
+export declare const MAX_DUST: number;
 /** What one frame needs, all of it already resolved by the element. */
 export interface StrandsFrame {
+    /** How much the glow around the strands adds, as a multiplier. */
+    bloom: number;
+    /** How far apart the brightest and dimmest strands are, from `0` to `1`. */
+    contrast: number;
     /** How many of the path's points are in use. */
     count: number;
+    /** How much nearness shows, from `0`, flat, to `1`. */
+    depth: number;
+    /** How many specks of dust drift around the strands. */
+    dust: number;
+    /** How differently each strand moves, from `0`, as one, to `1`. */
+    drift: number;
     /** The device pixels per CSS pixel the buffer was sized at. */
     dpr: number;
     /** Overall brightness. */

package/dist/strands/renderer.js

@@ -2,7 +2,11 @@ import { BLUR_FRAGMENT, COMPOSITE_FRAGMENT, DOWN_FRAGMENT, DUST_FRAGMENT, DUST_V
 export const MAX_STRANDS = 340;
 export const MIN_STRANDS = 60;
 const SEGMENTS = 320;
-const DUST = 600;
+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 {
     constructor(gl, programs) {
         this.targets = null;
@@ -82,6 +86,7 @@ export class StrandsRenderer {
             this.vec3(this.line, 'uTint', palette.tint);
             this.vec3(this.line, 'uPeak', palette.peak);
             this.float(this.line, 'uSoftness', frame.softness);
+            this.float(this.line, 'uContrast', frame.contrast);
             gl.bindVertexArray(this.ribbon);
             gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, (SEGMENTS + 1) * 2, frame.strands);
             this.use(this.dust, frame);
@@ -89,7 +94,9 @@ export class StrandsRenderer {
             this.vec3(this.dust, 'uPeak', palette.peak);
             this.float(this.dust, 'uStrands', frame.strands);
             gl.bindVertexArray(this.empty);
-            gl.drawArrays(gl.POINTS, 0, DUST);
+            if (frame.dust > 0) {
+                gl.drawArrays(gl.POINTS, 0, frame.dust);
+            }
             gl.disable(gl.BLEND);
         }
         const { far, farSwap, near, nearSwap } = targets;
@@ -108,7 +115,8 @@ export class StrandsRenderer {
         this.vec3(this.composite, 'uGround', palette.ground);
         this.vec3(this.composite, 'uInk', palette.peak);
         this.float(this.composite, 'uLight', palette.light ? 1 : 0);
-        this.float(this.composite, 'uGain', (1.7 * frame.gain) / this.scale);
+        this.float(this.composite, 'uGain', (GAIN * frame.gain) / this.scale);
+        this.float(this.composite, 'uBloom', BLOOM * frame.bloom);
         gl.bindVertexArray(this.empty);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
     }
@@ -169,7 +177,9 @@ export class StrandsRenderer {
         gl.uniform1f(program.uniforms.get('uScroll') ?? null, frame.scroll);
         gl.uniform2f(program.uniforms.get('uT') ?? null, frame.range[0], frame.range[1]);
         gl.uniform1f(program.uniforms.get('uTime') ?? null, frame.time);
-        gl.uniform1f(program.uniforms.get('uSpread') ?? null, frame.spread);
+        gl.uniform1f(program.uniforms.get('uSpread') ?? null, SPREAD * frame.spread);
+        gl.uniform1f(program.uniforms.get('uDepth') ?? null, frame.depth);
+        gl.uniform1f(program.uniforms.get('uDrift') ?? null, frame.drift);
         gl.uniform1f(program.uniforms.get('uDpr') ?? null, frame.dpr);
         gl.uniform1f(program.uniforms.get('uScale') ?? null, this.scale);
     }

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-info));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(
+export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-accent));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(
 115deg,
 var(--_strands-ground) 20%,
 color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%,

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

@@ -11,16 +11,16 @@ import { type StrandsVariant } from '../path.js';
  * roll over one another, and light runs along them.
  *
  * Its palette comes from the tokens. The strands are `--helix-color-primary`,
- * a few are `--helix-color-info` for depth, and the page they light is
+ * a few are `--helix-color-accent` for depth, and the page they light is
  * `--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`.** `fan` is a tight, bright bend with its
+ * **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.
  *
  * **In its own box, by default.** The element fills the box it is given, the
- * way an image does, and `at` places the fan's bend or the ribbon's axis across
+ * way an image does, and `at` places the bend's apex or the ribbon's axis across
  * it. Content placed inside sits over the ribbon, in the `content` part.
  *
  * **Down the whole page, with `travel`.** The element fixes itself behind the
@@ -28,8 +28,9 @@ import { type StrandsVariant } from '../path.js';
  * bottom, so scrolling travels along it. Put `helix-strands-stop` elements
  * inside to pin a form to a section: each names an element with `for` and says
  * which form the ribbon takes there. Between stops the ribbon fills the gap in
- * its own `variant`, and between two waves it turns off screen so each wave
- * reads alone. Set `z-index` on the element to move it.
+ * its own `variant`, and between two waves less than a screen and a half
+ * apart it turns off screen so each wave reads alone. Set `z-index` on the
+ * element to move it.
  *
  * The ribbon stops moving in these cases:
  * - `prefers-reduced-motion` is set. The element shows one still frame, and in
@@ -61,16 +62,16 @@ import { type StrandsVariant } from '../path.js';
  * @cssproperty --strands-glow - The color of most strands. Defaults to `--helix-color-primary`.
  * @cssproperty --strands-ground - The page the light is added to. Defaults to `--helix-color-background`.
  * @cssproperty --strands-peak - The hottest strands, and on a light page the ink the light darkens toward. Defaults to `--helix-color-primary-hover` on a dark page and `--helix-color-primary-active` on a light one.
- * @cssproperty --strands-tint - The color of a few strands, for depth. Defaults to `--helix-color-info`.
+ * @cssproperty --strands-tint - The color of a few strands, for depth. Defaults to `--helix-color-accent`, which is the primary itself unless the theme relates an accent to the brand, as `accent: { from: 'brand', rotate: 40 }` does.
  *
  * @cssstate fallback - The element shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the ribbon draws again.
  */
 export declare class HelixStrands extends HelixElement {
     static styles: CSSResultGroup;
     /**
-     * Where the form sits across the box, as a share of the width: the fan's
-     * bend or the ribbon's axis. `0` is the left edge and `1` the right. A wave
-     * crosses the whole width and does not read it. Unset, a fan bends at `0.4`
+     * Where the form sits across the box, as a share of the width: the bend's
+     * apex or the ribbon's axis. `0` is the left edge and `1` the right. 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.
      *
      * **A share rather than a length**, so the ribbon keeps its place when the
@@ -78,17 +79,47 @@ export declare class HelixStrands extends HelixElement {
      * own.
      */
     at?: number;
+    /**
+     * How much the glow around the strands adds, as a multiplier. `0` draws the
+     * strands alone, crisp and dimmer, and `1` is the default glow.
+     */
+    bloom: number;
+    /**
+     * How far apart the brightest and dimmest strands are, from `0`, most of
+     * them alike, to `1`, a few burning bright over many faint ones. Clamped to
+     * that range. The ribbon as a whole keeps its strength.
+     */
+    contrast: number;
     /**
      * How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
      * forty. Clamped to that range.
      */
     density: number;
+    /**
+     * How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that
+     * range. The strands at the front of the ribbon's roll are drawn thicker,
+     * brighter, and further from its axis, and those at the back thinner, dimmer,
+     * and out of focus.
+     */
+    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.
+     */
+    drift: number;
+    /**
+     * How many specks of dust drift around the strands, as a multiplier: `0`
+     * draws none, `1` six hundred, and `4`, the most, two thousand four
+     * hundred. They gather where the ribbon is brightest.
+     */
+    dust: number;
     /** Overall brightness, as a multiplier on the light. */
     gain: number;
     /**
      * 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
-     * form, such as a fan's bend or a wave, stays sharp whatever this says.
+     * form, such as a bend's apex or a wave, stays sharp whatever this says.
      */
     softness: number;
     /** How fast the ribbon moves, as a multiplier on time. `0` holds it still. */

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

@@ -10,18 +10,24 @@ 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 { MAX_STRANDS, MIN_STRANDS, StrandsRenderer } from '../renderer.js';
+import { DUST, MAX_DUST, 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;
 const OPENING_PATIENCE = 500;
 const TRAVEL_EASE = 0.09;
+const PACE = 0.25;
 let HelixStrands = class HelixStrands extends HelixElement {
     constructor() {
         super(...arguments);
+        this.bloom = 1;
+        this.contrast = 1;
         this.density = 0.8;
+        this.depth = 1;
+        this.drift = 1;
+        this.dust = 1;
         this.gain = 1;
-        this.softness = 0.55;
+        this.softness = 0;
         this.speed = 1;
         this.spread = 1;
         this.travel = false;
@@ -303,7 +309,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
             this.table = lookup(path);
         }
         else {
-            path = boxPath(variant, this.at, this.box.height);
+            path = boxPath(variant, this.at, this.box.height, this.box.width);
         }
         this.points.fill(0);
         path.forEach((point, i) => {
@@ -327,7 +333,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
                 at: Number.isFinite(at) ? at : undefined,
                 height: rect.height,
                 top: rect.top + scroll,
-                variant: variant === 'fan' || variant === 'waves' ? variant : 'ribbon',
+                variant: variant === 'bend' || variant === 'waves' ? variant : 'ribbon',
             });
         }
         return placed;
@@ -364,9 +370,15 @@ let HelixStrands = class HelixStrands extends HelixElement {
             ? visibleRange(this.table, this.offset - view[1] * 0.4, this.offset + view[1] * 1.4)
             : [0, 1];
         const density = Math.min(1, Math.max(0, this.density));
+        const share = (value) => Math.min(1, Math.max(0, value));
         renderer.render({
+            bloom: Math.max(0, this.bloom),
+            contrast: share(this.contrast),
             count: this.count,
+            depth: share(this.depth),
             dpr: this.dpr,
+            drift: share(this.drift),
+            dust: Math.round(Math.min(MAX_DUST, Math.max(0, this.dust * DUST))),
             gain: Math.max(0, this.gain),
             points: this.points,
             range,
@@ -425,7 +437,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
         }
         const step = Math.min(this.held, MAX_FRAME_STEP);
         this.held = 0;
-        this.elapsed += step * Math.max(0, this.speed);
+        this.elapsed += step * PACE * Math.max(0, this.speed);
         if (this.travel) {
             const target = window.scrollY;
             this.offset += (target - this.offset) * (1 - Math.exp(-step / TRAVEL_EASE));
@@ -439,9 +451,24 @@ let HelixStrands = class HelixStrands extends HelixElement {
 __decorate([
     property({ type: Number })
 ], HelixStrands.prototype, "at", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "bloom", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "contrast", void 0);
 __decorate([
     property({ type: Number })
 ], HelixStrands.prototype, "density", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "depth", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "drift", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "dust", void 0);
 __decorate([
     property({ type: Number })
 ], HelixStrands.prototype, "gain", void 0);