@fusion.dev/helix 0.173.0 → 0.175.0

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);

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";