@fusion.dev/helix 0.161.0 → 0.162.0

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

@@ -0,0 +1,466 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var HelixStrands_1;
+import { customElement, drawsInSoftware, elementById, HelixElement, HelixStrandsFallbackEvent, MAX_FRAME_STEP, PaintGateController, readColor, } from '@fusion.dev/helix-core';
+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 { 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;
+let HelixStrands = class HelixStrands extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.density = 0.8;
+        this.gain = 1;
+        this.softness = 0.55;
+        this.speed = 1;
+        this.spread = 1;
+        this.travel = false;
+        this.palette = { ...RESTING_PALETTE };
+        this.carried = null;
+        this.refused = 'unavailable';
+        this.canvas = null;
+        this.gl = null;
+        this.renderer = null;
+        this.release = 0;
+        this.elapsed = 0;
+        this.width = 0;
+        this.height = 0;
+        this.dpr = 1;
+        this.box = { height: 1, width: 1 };
+        this.points = new Float32Array(MAX_POINTS * 4);
+        this.count = 0;
+        this.table = new Float32Array(1);
+        this.offset = 0;
+        this.opened = false;
+        this.opening = 0;
+        this.openBy = 0;
+        this.laying = 0;
+        this.pageObserver = null;
+        this.stopObserver = null;
+        this.gate = new PaintGateController(this, {
+            canRun: () => !!this.gl && !this.gl.isContextLost() && this.width > 0 && this.opened,
+            onFrame: (delta) => {
+                this.advance(delta);
+            },
+            onMotion: (reduced) => {
+                if (reduced) {
+                    this.paintOnce();
+                }
+            },
+            onResize: () => {
+                this.resized();
+            },
+        });
+        this.drop = () => {
+            this.release = 0;
+            this.renderer?.dispose();
+            this.gl?.getExtension('WEBGL_lose_context')?.loseContext();
+            this.renderer = null;
+            this.gl = null;
+        };
+        this.handleLost = (event) => {
+            event.preventDefault();
+            this.gate.stop();
+            if (this.opening) {
+                cancelAnimationFrame(this.opening);
+                this.opening = 0;
+            }
+            this.renderer = null;
+            this.canvas?.toggleAttribute('hidden', true);
+            this.fallBack('lost');
+        };
+        this.handleRestored = () => {
+            if (!this.prepare()) {
+                return;
+            }
+            this.width = 0;
+            this.height = 0;
+            this.measure();
+            if (this.opened) {
+                this.paint();
+                this.gate.play();
+            }
+            else if (this.width) {
+                this.open();
+            }
+        };
+        this.handleRestyle = () => {
+            this.paintOnce();
+        };
+        this.relayout = () => {
+            if (this.laying) {
+                return;
+            }
+            this.laying = requestAnimationFrame(() => {
+                this.laying = 0;
+                this.layout();
+                this.paintOnce();
+            });
+        };
+        this.handleScroll = () => {
+            if (!this.gate.running) {
+                this.offset = window.scrollY;
+                this.paintOnce();
+            }
+        };
+        this.held = 0;
+    }
+    static { HelixStrands_1 = this; }
+    static { this.styles = styles; }
+    static { this.CONTEXT = {
+        alpha: true,
+        antialias: false,
+        depth: false,
+        powerPreference: 'low-power',
+        stencil: false,
+    }; }
+    render() {
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>
+      <div part="content"><slot></slot></div>`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.start();
+    }
+    updated(changed) {
+        if (changed.has('travel') && this.hasUpdated && this.canvas) {
+            this.watchPage(this.travel);
+        }
+        if (changed.has('variant') || changed.has('at') || changed.has('travel')) {
+            this.layout();
+        }
+        this.paintOnce();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.release) {
+            clearTimeout(this.release);
+            this.release = 0;
+        }
+        if (this.hasUpdated) {
+            this.start();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.opening) {
+            cancelAnimationFrame(this.opening);
+            this.opening = 0;
+            this.openBy = 0;
+        }
+        if (this.laying) {
+            cancelAnimationFrame(this.laying);
+            this.laying = 0;
+        }
+        this.canvas?.removeEventListener('webglcontextlost', this.handleLost);
+        this.canvas?.removeEventListener('webglcontextrestored', this.handleRestored);
+        this.canvas?.removeEventListener('transitionend', this.handleRestyle);
+        this.watchPage(false);
+        this.release = window.setTimeout(this.drop, 0);
+    }
+    start() {
+        if (!this.isConnected) {
+            return;
+        }
+        if (!this.renderRoot.querySelector('canvas')) {
+            return;
+        }
+        if (this.renderer && this.gl?.isContextLost()) {
+            this.renderer = null;
+            this.gl = null;
+        }
+        if (!this.renderer && !this.gl?.isContextLost() && !this.build()) {
+            this.fallBack(this.refused);
+            return;
+        }
+        this.canvas?.addEventListener('webglcontextlost', this.handleLost);
+        this.canvas?.addEventListener('webglcontextrestored', this.handleRestored);
+        this.canvas?.addEventListener('transitionend', this.handleRestyle);
+        this.gate.watch();
+        this.watchPage(this.travel);
+        if (this.measure() || (this.width && !this.opened)) {
+            this.open();
+        }
+    }
+    build() {
+        let canvas = this.renderRoot.querySelector('canvas');
+        if (!canvas) {
+            return false;
+        }
+        if (drawsInSoftware(HelixStrands_1.CONTEXT)) {
+            this.refused = 'software';
+            return false;
+        }
+        this.refused = 'unavailable';
+        let gl = canvas.getContext('webgl2', HelixStrands_1.CONTEXT);
+        if (gl?.isContextLost()) {
+            const fresh = document.createElement('canvas');
+            fresh.setAttribute('part', 'canvas');
+            fresh.setAttribute('aria-hidden', 'true');
+            canvas.replaceWith(fresh);
+            canvas = fresh;
+            this.width = 0;
+            this.height = 0;
+            gl = canvas.getContext('webgl2', HelixStrands_1.CONTEXT);
+        }
+        this.canvas = canvas;
+        this.gl = gl;
+        if (!gl || gl.isContextLost()) {
+            return false;
+        }
+        return this.prepare();
+    }
+    prepare() {
+        const gl = this.gl;
+        if (!gl) {
+            return false;
+        }
+        this.renderer = StrandsRenderer.create(gl);
+        if (!this.renderer) {
+            return false;
+        }
+        this.canvas?.toggleAttribute('hidden', false);
+        this.fallback = undefined;
+        this.toggleState('fallback', false);
+        return true;
+    }
+    fallBack(reason) {
+        if (this.fallback !== undefined) {
+            return;
+        }
+        this.fallback = reason;
+        this.toggleState('fallback', true);
+        this.dispatchEvent(new HelixStrandsFallbackEvent({ reason }));
+    }
+    readPalette() {
+        const canvas = this.canvas;
+        if (!canvas) {
+            return;
+        }
+        if (this.carried?.canvas !== canvas) {
+            this.carried = { canvas, style: getComputedStyle(canvas), text: '' };
+        }
+        const { style } = this.carried;
+        const text = `${style.color} ${style.textDecorationColor} ${style.outlineColor} ${style.columnRuleColor} ${style.caretColor}`;
+        if (text !== this.carried.text) {
+            this.carried.text = text;
+            this.palette = paletteOf(style, readColor);
+        }
+    }
+    measure() {
+        const canvas = this.canvas;
+        const renderer = this.renderer;
+        if (!canvas || !renderer) {
+            return false;
+        }
+        const rect = this.getBoundingClientRect();
+        if (rect.width < 1 || rect.height < 1) {
+            return false;
+        }
+        this.box = { height: rect.height, width: rect.width };
+        let dpr = Math.min(window.devicePixelRatio || 1, 2) * 0.75;
+        const edge = Math.max(rect.width, rect.height) * dpr;
+        if (edge > MAX_CANVAS_EDGE) {
+            dpr *= MAX_CANVAS_EDGE / edge;
+        }
+        const pixels = rect.width * rect.height * dpr * dpr;
+        if (pixels > MAX_CANVAS_PIXELS) {
+            dpr *= Math.sqrt(MAX_CANVAS_PIXELS / pixels);
+        }
+        const width = Math.round(rect.width * dpr);
+        const height = Math.round(rect.height * dpr);
+        if (width === this.width && height === this.height) {
+            return false;
+        }
+        this.width = width;
+        this.height = height;
+        this.dpr = dpr;
+        canvas.width = width;
+        canvas.height = height;
+        if (!renderer.resize(width, height)) {
+            this.renderer = null;
+            this.fallBack('unavailable');
+            return false;
+        }
+        this.layout();
+        return true;
+    }
+    layout() {
+        let path;
+        const variant = this.variant ?? 'ribbon';
+        if (this.travel) {
+            path = pagePath(this.placedStops(), variant, this.box.width, this.box.height, document.documentElement.scrollHeight);
+            this.table = lookup(path);
+        }
+        else {
+            path = boxPath(variant, this.at, this.box.height);
+        }
+        this.points.fill(0);
+        path.forEach((point, i) => {
+            this.points.set(point, i * 4);
+        });
+        this.count = path.length;
+    }
+    placedStops() {
+        const placed = [];
+        const scroll = window.scrollY;
+        for (const stop of this.querySelectorAll(':scope > helix-strands-stop')) {
+            const name = stop.getAttribute('for');
+            const target = name ? elementById(stop, name) : null;
+            if (!target) {
+                continue;
+            }
+            const rect = target.getBoundingClientRect();
+            const at = Number.parseFloat(stop.getAttribute('at') ?? '');
+            const variant = stop.getAttribute('variant');
+            placed.push({
+                at: Number.isFinite(at) ? at : undefined,
+                height: rect.height,
+                top: rect.top + scroll,
+                variant: variant === 'fan' || variant === 'waves' ? variant : 'ribbon',
+            });
+        }
+        return placed;
+    }
+    watchPage(on) {
+        window.removeEventListener('scroll', this.handleScroll);
+        this.pageObserver?.disconnect();
+        this.stopObserver?.disconnect();
+        this.pageObserver = null;
+        this.stopObserver = null;
+        if (!on) {
+            return;
+        }
+        this.offset = window.scrollY;
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
+        this.pageObserver = new ResizeObserver(this.relayout);
+        this.pageObserver.observe(document.documentElement);
+        this.stopObserver = new MutationObserver(this.relayout);
+        this.stopObserver.observe(this, {
+            attributeFilter: ['at', 'for', 'variant'],
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    paint() {
+        const { renderer } = this;
+        if (!renderer || !this.width) {
+            return;
+        }
+        this.readPalette();
+        const view = [this.box.width, this.box.height];
+        const range = this.travel
+            ? 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));
+        renderer.render({
+            count: this.count,
+            dpr: this.dpr,
+            gain: Math.max(0, this.gain),
+            points: this.points,
+            range,
+            scroll: this.travel ? this.offset : 0,
+            softness: Math.min(1, Math.max(0, this.softness)),
+            spread: Math.max(0, this.spread),
+            strands: Math.round(MIN_STRANDS + (MAX_STRANDS - MIN_STRANDS) * density),
+            time: this.elapsed,
+            view,
+        }, this.palette);
+    }
+    resized() {
+        if (!this.measure()) {
+            this.paintOnce();
+            return;
+        }
+        if (this.opened) {
+            this.paint();
+            this.gate.play();
+            return;
+        }
+        this.open();
+    }
+    open() {
+        if (this.opening) {
+            cancelAnimationFrame(this.opening);
+            this.opening = 0;
+        }
+        if (this.openBy === 0) {
+            this.openBy = performance.now() + OPENING_PATIENCE;
+        }
+        const draw = () => {
+            this.opening = 0;
+            this.opened = true;
+            this.paint();
+            this.gate.play();
+        };
+        if (performance.now() >= this.openBy) {
+            draw();
+            return;
+        }
+        this.opening = requestAnimationFrame(draw);
+    }
+    paintOnce() {
+        if (this.gate.running || !this.opened || !this.isConnected) {
+            return;
+        }
+        this.paint();
+    }
+    static { this.CAPPED = 1 / 30; }
+    advance(delta) {
+        this.held += delta;
+        const traveling = this.travel && Math.abs(window.scrollY - this.offset) > 0.5;
+        if (!traveling && this.held < HelixStrands_1.CAPPED) {
+            return;
+        }
+        const step = Math.min(this.held, MAX_FRAME_STEP);
+        this.held = 0;
+        this.elapsed += step * Math.max(0, this.speed);
+        if (this.travel) {
+            const target = window.scrollY;
+            this.offset += (target - this.offset) * (1 - Math.exp(-step / TRAVEL_EASE));
+            if (Math.abs(target - this.offset) < 0.5) {
+                this.offset = target;
+            }
+        }
+        this.paint();
+    }
+};
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "at", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "density", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "gain", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "softness", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "speed", void 0);
+__decorate([
+    property({ type: Number })
+], HelixStrands.prototype, "spread", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixStrands.prototype, "travel", void 0);
+__decorate([
+    property()
+], HelixStrands.prototype, "variant", void 0);
+HelixStrands = HelixStrands_1 = __decorate([
+    customElement('helix-strands')
+], HelixStrands);
+export { HelixStrands };

package/dist/strands/shader.d.ts

@@ -0,0 +1,22 @@
+/** 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";
+/** 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_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";
+/** Four bilinear taps, a box filter at half the step for the price of four reads. */
+export declare const DOWN_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uSource;\nuniform vec2 uTexel;\nout vec4 outColor;\nvoid main() {\n  vec3 c = texture(uSource, vUv + uTexel * vec2(-1.0, -1.0)).rgb\n    + texture(uSource, vUv + uTexel * vec2(1.0, -1.0)).rgb\n    + texture(uSource, vUv + uTexel * vec2(-1.0, 1.0)).rgb\n    + texture(uSource, vUv + uTexel * vec2(1.0, 1.0)).rgb;\n  outColor = vec4(c * 0.25, 1.0);\n}\n";
+/** A nine-tap Gaussian in five reads, along one axis. */
+export declare const BLUR_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nuniform sampler2D uSource;\nuniform vec2 uStep;\nout vec4 outColor;\nvoid main() {\n  vec3 c = texture(uSource, vUv).rgb * 0.2270;\n  c += (texture(uSource, vUv + uStep * 1.3846).rgb + texture(uSource, vUv - uStep * 1.3846).rgb) * 0.3162;\n  c += (texture(uSource, vUv + uStep * 3.2308).rgb + texture(uSource, vUv - uStep * 3.2308).rgb) * 0.0703;\n  outColor = vec4(c, 1.0);\n}\n";
+/**
+ * The light and its bloom over the page color.
+ *
+ * On a dark page the light is screened onto the ground, so it saturates to
+ * the peak rather than clipping. On a light page added light is invisible, so
+ * 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";

package/dist/strands/shader.js

@@ -0,0 +1,198 @@
+import { MAX_POINTS } from './path.js';
+const PATH = `
+uniform vec4 uPts[${MAX_POINTS}];
+uniform int uCount;
+uniform vec2 uView;
+uniform float uScroll;
+uniform vec2 uT;
+uniform float uTime;
+uniform float uSpread;
+
+float h1(float n) { return fract(sin(n * 127.1 + 311.7) * 43758.5453); }
+
+vec4 pt(int i) { return uPts[clamp(i, 0, uCount - 1)]; }
+
+vec4 spline(float t) {
+  float s = clamp(t, 0.0, 1.0) * float(uCount - 1);
+  int i = min(int(floor(s)), uCount - 2);
+  float f = s - float(i);
+  vec4 p0 = pt(i - 1);
+  vec4 p1 = pt(i);
+  vec4 p2 = pt(i + 1);
+  vec4 p3 = pt(i + 2);
+  float f2 = f * f;
+  float f3 = f2 * f;
+  return 0.5 * ((2.0 * p1) + (-p0 + p2) * f + (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * f2
+    + (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * f3);
+}
+
+vec2 place(vec4 c) { return vec2(c.x * uView.x, c.y - uScroll); }
+
+vec3 strandAt(float id, float t, out vec3 info) {
+  vec4 c = spline(t);
+  vec2 p = place(c);
+  vec2 q = place(spline(t + 0.0004));
+  vec2 tg = q - p;
+  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);
+  vec2 nr = vec2(-tg.y, tg.x);
+  float r1 = h1(id + 0.13);
+  float r2 = h1(id + 1.71);
+  float r3 = h1(id + 3.37);
+  float r4 = h1(id + 5.93);
+  float n = (r1 + r2 + r3) / 1.5 - 1.0;
+  float z = (r4 - 0.5) * 2.0;
+  float along = c.y + c.x * uView.x;
+  float th = along * 0.0033 + uTime * 0.25 + r2 * 0.5;
+  float width = c.z * uSpread;
+  float fan = width * uView.x * (1.0 + 0.25 * sin(uTime * 0.4 + along * 0.0045));
+  float sway = sin(along * 0.006 + uTime * 0.23) * mix(6.0, 30.0, smoothstep(0.02, 0.2, width));
+  float lat = sway + fan * (n * cos(th) + z * 0.55 * sin(th));
+  lat += sin(along * 0.01 + uTime * (0.6 + 0.5 * r1) + r1 * 6.283) * 12.0 * (0.3 + r3);
+  info = vec3(max(c.w, 0.0), width, along);
+  return vec3(p + nr * lat, z * sin(th));
+}
+`;
+export const LINE_VERTEX = `#version 300 es
+layout(location = 0) in vec2 aVert;
+layout(location = 1) in float aId;
+uniform float uDpr;
+uniform float uSoftness;
+uniform vec3 uGlow;
+uniform vec3 uTint;
+uniform vec3 uPeak;
+out float vSide;
+out vec3 vColor;
+${PATH}
+void main() {
+  float id = aId;
+  float r5 = h1(id + 7.77);
+  float r6 = h1(id + 9.19);
+  float r7 = h1(id + 11.3);
+  float t = mix(uT.x, uT.y, aVert.x);
+  vec3 info;
+  vec3 unused;
+  vec3 a = strandAt(id, t, info);
+  vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused);
+  vec2 tg = b.xy - a.xy;
+  tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0);
+  vec2 nrm = vec2(-tg.y, tg.x);
+  float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6);
+  float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + 0.3 * a.z);
+  float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr, 1.0);
+  float drawW = w + 2.5 * uDpr;
+  vec2 res = uView * uDpr;
+  vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5;
+  gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0);
+  vSide = aVert.y * drawW / w;
+  float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283);
+  shimmer *= shimmer;
+  float bright = mix(0.25, 1.0, pow(r5, 1.4));
+  float energy = min(base, w) / w;
+  float depth = 0.7 + 0.3 * a.z;
+  vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9);
+  col = mix(col, uPeak, step(0.93, r7) * 0.6);
+  vColor = col * energy * info.x * (0.35 + 0.65 * shimmer) * bright * depth;
+}
+`;
+export const LINE_FRAGMENT = `#version 300 es
+precision highp float;
+in float vSide;
+in vec3 vColor;
+uniform float uScale;
+out vec4 outColor;
+void main() {
+  outColor = vec4(vColor * exp(-vSide * vSide * 2.4) * uScale, 1.0);
+}
+`;
+export const DUST_VERTEX = `#version 300 es
+uniform float uDpr;
+uniform float uStrands;
+uniform vec3 uGlow;
+uniform vec3 uPeak;
+out vec3 vColor;
+${PATH}
+void main() {
+  float id = float(gl_VertexID);
+  float sid = floor(h1(id + 0.5) * uStrands);
+  float r = h1(id + 2.3);
+  float r2 = h1(id + 4.1);
+  float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2)));
+  vec3 info;
+  vec3 a = strandAt(sid, t, info);
+  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));
+  vec2 res = uView * uDpr;
+  vec2 px = (a.xy + off) * uDpr;
+  gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0);
+  gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr;
+  float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0));
+  vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * info.x * 0.8;
+}
+`;
+export const DUST_FRAGMENT = `#version 300 es
+precision highp float;
+in vec3 vColor;
+uniform float uScale;
+out vec4 outColor;
+void main() {
+  vec2 c = gl_PointCoord - 0.5;
+  outColor = vec4(vColor * exp(-dot(c, c) * 16.0) * uScale, 1.0);
+}
+`;
+export const QUAD_VERTEX = `#version 300 es
+out vec2 vUv;
+void main() {
+  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
+  vUv = p;
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+export const DOWN_FRAGMENT = `#version 300 es
+precision highp float;
+in vec2 vUv;
+uniform sampler2D uSource;
+uniform vec2 uTexel;
+out vec4 outColor;
+void main() {
+  vec3 c = texture(uSource, vUv + uTexel * vec2(-1.0, -1.0)).rgb
+    + texture(uSource, vUv + uTexel * vec2(1.0, -1.0)).rgb
+    + texture(uSource, vUv + uTexel * vec2(-1.0, 1.0)).rgb
+    + texture(uSource, vUv + uTexel * vec2(1.0, 1.0)).rgb;
+  outColor = vec4(c * 0.25, 1.0);
+}
+`;
+export const BLUR_FRAGMENT = `#version 300 es
+precision highp float;
+in vec2 vUv;
+uniform sampler2D uSource;
+uniform vec2 uStep;
+out vec4 outColor;
+void main() {
+  vec3 c = texture(uSource, vUv).rgb * 0.2270;
+  c += (texture(uSource, vUv + uStep * 1.3846).rgb + texture(uSource, vUv - uStep * 1.3846).rgb) * 0.3162;
+  c += (texture(uSource, vUv + uStep * 3.2308).rgb + texture(uSource, vUv - uStep * 3.2308).rgb) * 0.0703;
+  outColor = vec4(c, 1.0);
+}
+`;
+export const COMPOSITE_FRAGMENT = `#version 300 es
+precision highp float;
+in vec2 vUv;
+uniform sampler2D uScene;
+uniform sampler2D uNear;
+uniform sampler2D uFar;
+uniform vec3 uGround;
+uniform vec3 uInk;
+uniform float uLight;
+uniform float uGain;
+out vec4 outColor;
+float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }
+void main() {
+  vec3 e = texture(uScene, vUv).rgb + texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9;
+  e *= uGain;
+  vec3 dark = 1.0 - (1.0 - uGround) * exp(-e);
+  float lum = dot(e, vec3(0.3, 0.55, 0.15));
+  vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4));
+  vec3 c = mix(dark, light, uLight);
+  c += (hash(gl_FragCoord.xy) - 0.5) / 255.0;
+  outColor = vec4(c, 1.0);
+}
+`;

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

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