@deriv-com/dds-marketing 1.0.0 → 1.0.2

package/dist/components/core/background/halftone.js

@@ -0,0 +1,682 @@
+/**
+ * The halftone, drawn on a canvas and only when it has to be.
+ *
+ * A grid of dots, each as large and as bright as the glow is where it sits: full at the glow's
+ * centre, falling away along a soft ellipse, and gone at the edges. The glow rests at the middle of
+ * the band's bottom edge and — where the band allows it — follows the pointer. The dots themselves
+ * answer the pointer too: a moving pointer shoves the ones near it aside and a click sends a ripple
+ * out from where it landed, and each dot springs back to its place in the grid.
+ *
+ * What it costs is the reason it is written this way rather than as CSS or as an animation loop:
+ *
+ * - It draws on change and nowhere else. A resize draws one frame; a pointer draws frames only
+ *   while the glow is catching up or a dot is still moving. The resting drift is the one thing that
+ *   keeps it drawing, at half the display's rate, and only while the band is on screen and motion
+ *   is allowed — with the drift set to nothing, a band nobody is touching runs no code at all.
+ * - A band out of view draws nothing, and catches up with one frame when it returns.
+ * - The bitmap is held to twice the CSS pixel density, which is all a dot this small can use.
+ * - The dots are batched by brightness into a few dozen paths, so a frame is a few dozen fills
+ *   rather than one per dot. Drawing visits only the rows below the pattern's edge, rejects a dot
+ *   too small to be seen before working out its light — every dot, while the size floor keeps the
+ *   screen across the whole band — and draws a dot under a pixel and a half as a square, which
+ *   nobody can tell from a circle at that size.
+ * - Pointer events only record where the pointer is. The frame reads the band's position once and
+ *   acts on it, so a fast mouse costs one layout read a frame rather than one per event; a shove or
+ *   a ripple visits the grid cells it can reach, and the spring visits only the dots still moving.
+ *
+ * Every default comes from a token: the inks are the canvas's computed `color` (the glow's edge) and
+ * `outline-color` (its centre), the grid is
+ * size.halftone.pitch and size.halftone.dot, and the glow's movement is the canvas's transition
+ * duration and timing function. The rest are settings this file names, and `retune` overrides any
+ * of them while a pattern is being decided — the preview's Tune panel, and nothing a page uses.
+ */
+/** The settings that are not read from a token. */
+/**
+ * How strong the pattern is on each ground, where nothing has set it. The dark ground takes the
+ * least: white dots on near-black are the highest contrast the pattern has, and at full strength
+ * the glow's heart outshone the words standing on it. The light and the coral grounds keep most of
+ * theirs, where the dots are closer to the ground they sit on.
+ */
+const OPACITY = { dark: 0.55, light: 0.85, brand: 0.85 };
+const SETTINGS = {
+    // A third opaque at the faintest: the edge of the glow is a dim field of dots rather than a
+    // fade to nothing, so the pattern reaches the band's edges without competing with its heart.
+    floor: 0.37,
+    // Six tenths of the band's width and of its height at rest — a pool of light rather than a
+    // wash. An ellipse rather than a circle because a band is wide, and a round glow is either lost
+    // in it or cut off by it.
+    reachX: 0.6,
+    reachY: 0.6,
+    // A third of that under the pointer, so the light gathers where the pointer is rather than
+    // washing across the band — at half, it lit most of a narrow band.
+    hoverScale: 0.35,
+    // The whole band, fading in from the top to full at the foot — the way the aurora, the rule grid
+    // and the rings cover it, so the four patterns fill a band alike. Every dot keeps half of its
+    // widest wherever the glow is, so the screen reaches the band's edges as the grid's lines
+    // do, and the glow swells the dots it falls on rather than being the only place there are dots.
+    top: 0,
+    topFade: 1,
+    sizeFloor: 0.5,
+    // The glow follows the pointer no higher than a little under halfway: above that its brightest
+    // dots would sit where the fade has thinned them, and the heart of the light would read as dim.
+    ceiling: 0.47,
+    falloff: 1.2,
+    // Centred, on the band's foot, so the light rises from the bottom edge under the words.
+    restX: 0.5,
+    restY: 0.97,
+    // At rest the glow wanders along the band's foot: a fifth of the band either side, a little rise
+    // and fall, one sweep every sixteen seconds — slow enough to be felt rather than watched.
+    drift: 0.2,
+    driftRise: 0.04,
+    driftPeriod: 16,
+    // A moving pointer parts the dots near it, and they settle back in under a second and a half.
+    proximity: 145,
+    resistance: 1850,
+    returnDuration: 1.4,
+    // A click is a small, light tap rather than a shockwave.
+    shockRadius: 60,
+    shockStrength: 0.5,
+};
+/** Overrides set while a pattern is being decided. Empty on every real page. */
+let overrides = {};
+const live = new Set();
+let resolved = null;
+/**
+ * Override settings on every halftone on the page, live. For deciding a pattern — the preview's
+ * Tune panel calls it — and never for a page: what a page draws is what the tokens and the
+ * settings above say.
+ */
+export function retune(next) {
+    overrides = { ...next };
+    for (const refresh of live)
+        refresh();
+}
+/** The settings the last halftone drew with, overrides included — for a panel to show. */
+export function currentTuning() {
+    return resolved;
+}
+/** Below this radius a dot is not drawn — a fraction of a pixel is a smudge, not a dot. */
+const SMALLEST = 0.4;
+/**
+ * How many brightnesses the dots are batched into. Each step is one fill, so a frame costs this
+ * many fills rather than one per dot. Eight was too few: under the pointer the glow is half its
+ * resting size, brightness falls off twice as fast across the dots, and eight steps showed as rings
+ * of light rather than a fade. Thirty-two is finer than the eye can split at this dot size, and
+ * still a few dozen fills a frame.
+ */
+const STEPS = 32;
+/** Twice the CSS pixel density at most. */
+const DENSITY_CAP = 2;
+/** How springy a shoved dot is on its way back: below 1 it overshoots a little and settles. */
+const DAMPING = 0.5;
+/** A dimension token's value in CSS pixels, which is how the token build writes them. */
+function pixels(value, fallback) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+/** A computed duration — `0.4s` or `400ms` — in milliseconds. */
+function milliseconds(value) {
+    const first = value.split(',')[0]?.trim() ?? '';
+    const parsed = Number.parseFloat(first);
+    if (!Number.isFinite(parsed))
+        return 0;
+    return first.endsWith('ms') ? parsed : parsed * 1000;
+}
+/**
+ * A computed timing function as a function of progress: `cubic-bezier(x1, y1, x2, y2)` solved for
+ * its x by bisection and read for its y — the curve the stylesheet would have run. Anything else
+ * falls back to decelerating, which is what motion.easing.enter is.
+ */
+function easing(value) {
+    const match = /cubic-bezier\(([^)]+)\)/.exec(value);
+    const parts = match?.[1]?.split(',').map((each) => Number.parseFloat(each));
+    if (parts === undefined || parts.length !== 4 || parts.some((each) => !Number.isFinite(each))) {
+        return (t) => 1 - (1 - t) ** 3;
+    }
+    const [x1, y1, x2, y2] = parts;
+    const axis = (a, b, s) => 3 * a * s * (1 - s) ** 2 + 3 * b * s ** 2 * (1 - s) + s ** 3;
+    return (t) => {
+        if (t <= 0)
+            return 0;
+        if (t >= 1)
+            return 1;
+        let low = 0;
+        let high = 1;
+        let s = t;
+        for (let i = 0; i < 20; i += 1) {
+            s = (low + high) / 2;
+            if (axis(x1, x2, s) < t)
+                low = s;
+            else
+                high = s;
+        }
+        return axis(y1, y2, s);
+    };
+}
+/** Any CSS colour as red, green, blue and alpha, by letting a canvas parse it. */
+function rgba(context, colour) {
+    context.fillStyle = '#000';
+    context.fillStyle = colour;
+    const parsed = context.fillStyle;
+    if (parsed.startsWith('#')) {
+        const hex = parsed.slice(1);
+        return [
+            Number.parseInt(hex.slice(0, 2), 16),
+            Number.parseInt(hex.slice(2, 4), 16),
+            Number.parseInt(hex.slice(4, 6), 16),
+            1,
+        ];
+    }
+    const numbers = /rgba?\(([^)]+)\)/.exec(parsed)?.[1]?.split(',').map((each) => Number.parseFloat(each)) ?? [];
+    return [numbers[0] ?? 0, numbers[1] ?? 0, numbers[2] ?? 0, numbers[3] ?? 1];
+}
+export function halftone(root, canvas, options) {
+    // Somewhere with no layout to observe — a test's DOM, an old browser — the band keeps its flat
+    // ground, which is a finished band rather than a broken one.
+    if (typeof ResizeObserver === 'undefined' || typeof IntersectionObserver === 'undefined') {
+        return { destroy: () => { } };
+    }
+    const context = canvas.getContext('2d');
+    if (context === null)
+        return { destroy: () => { } };
+    const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+    /** Whether the pattern answers the pointer: asked to, and motion not declined. */
+    const allowed = () => options.interactive && reduced?.matches !== true;
+    // The tokens, read once: they do not change while the band is on screen, and reading computed
+    // style inside a frame is a style recalculation on every draw.
+    const style = getComputedStyle(canvas);
+    const tokens = getComputedStyle(root);
+    const fromTokens = {
+        base: style.color,
+        active: style.outlineColor || style.color,
+        dot: pixels(tokens.getPropertyValue('--size-halftone-dot'), 6),
+        pitch: pixels(tokens.getPropertyValue('--size-halftone-pitch'), 20),
+        follow: milliseconds(style.transitionDuration),
+        opacity: OPACITY[root.dataset['tone'] ?? 'dark'] ?? 1,
+    };
+    const ease = easing(style.transitionTimingFunction);
+    let tuning = { ...fromTokens, ...SETTINGS, ...overrides };
+    // One colour per brightness step, from the base at the faintest to the active at the brightest.
+    let fills = [];
+    function settle() {
+        tuning = { ...fromTokens, ...SETTINGS, ...overrides };
+        resolved = tuning;
+        const from = rgba(context, tuning.base);
+        const to = rgba(context, tuning.active);
+        // A step is a brightness, from nothing to full. It decides the dot's opacity and how far its
+        // colour has moved from the base to the active ink — so a dot fading out at the pattern's edge
+        // dims and returns to the base colour together, and blends into the ground.
+        fills = Array.from({ length: STEPS }, (_, step) => {
+            const t = (step + 0.5) / STEPS;
+            const mix = (a, b) => Math.round(a + (b - a) * t);
+            const alpha = t * (from[3] + (to[3] - from[3]) * t) * Math.max(0, Math.min(1, tuning.opacity));
+            return `rgba(${mix(from[0], to[0])}, ${mix(from[1], to[1])}, ${mix(from[2], to[2])}, ${alpha})`;
+        });
+    }
+    let width = 0;
+    let height = 0;
+    let visible = true;
+    let frame = 0;
+    let last = 0;
+    // The grid: where it starts, how many columns and rows, and each dot's home. A regular grid, so a
+    // dot's index follows from its row and column — which is what lets every loop below visit only
+    // the rows and columns that can matter rather than every dot on the band.
+    let pitch = 20;
+    let startX = 0;
+    let startY = 0;
+    let columns = 0;
+    let rows = 0;
+    let homeX = new Float32Array(0);
+    let homeY = new Float32Array(0);
+    // How far, and how fast, each dot has been knocked from home.
+    let offX = new Float32Array(0);
+    let offY = new Float32Array(0);
+    let velX = new Float32Array(0);
+    let velY = new Float32Array(0);
+    // The dots currently knocked, so the spring visits those and nothing else. `knocked` marks a dot
+    // as listed, so a dot struck twice is listed once.
+    let moving = [];
+    let knocked = new Uint8Array(0);
+    function layout() {
+        pitch = Math.max(4, tuning.pitch);
+        // Centred on the band, so the grid sits symmetrically whatever its width.
+        startX = ((width % pitch) + pitch) / 2 - pitch;
+        startY = ((height % pitch) + pitch) / 2 - pitch;
+        columns = Math.ceil((width - startX) / pitch) + 1;
+        rows = Math.ceil((height - startY) / pitch) + 1;
+        const count = columns * rows;
+        homeX = new Float32Array(count);
+        homeY = new Float32Array(count);
+        offX = new Float32Array(count);
+        offY = new Float32Array(count);
+        velX = new Float32Array(count);
+        velY = new Float32Array(count);
+        knocked = new Uint8Array(count);
+        moving = [];
+        let at = 0;
+        for (let row = 0; row < rows; row += 1) {
+            for (let column = 0; column < columns; column += 1) {
+                homeX[at] = startX + column * pitch;
+                homeY[at] = startY + row * pitch;
+                at += 1;
+            }
+        }
+    }
+    // The glow's position in CSS pixels. While a pointer is over the band, or the glow is drifting,
+    // it chases `target`; with neither, it glides back to rest along the eased curve.
+    let glowX = 0;
+    let glowY = 0;
+    let target = null;
+    let glide = null;
+    let resting = true;
+    // How large the glow is right now, as a share of its resting size — eased towards hoverScale
+    // while a pointer is over the band and back to 1 when it leaves, so the size never jumps.
+    let scale = 1;
+    const rest = () => ({ x: width * tuning.restX, y: height * tuning.restY });
+    /**
+     * Whether the resting glow drifts: asked to animate, motion not declined, and a drift asked for.
+     * Apart from the pointer, so a band can drift without answering it or answer it without drifting.
+     */
+    const drifts = () => options.animated &&
+        reduced?.matches !== true &&
+        tuning.driftPeriod > 0 &&
+        (tuning.drift > 0 || tuning.driftRise > 0);
+    /**
+     * Where the drifting glow is at a moment: its rest, plus two slow waves across and one up and
+     * down, at periods that do not divide into each other — so the path never visibly repeats, and
+     * the light wanders rather than swinging like a pendulum.
+     */
+    const drifted = (now) => {
+        const turn = (now / 1000 / tuning.driftPeriod) * Math.PI * 2;
+        const across = Math.sin(turn) * 0.7 + Math.sin(turn * 0.59 + 1.3) * 0.3;
+        const rise = Math.sin(turn * 0.77 + 0.4);
+        const at = rest();
+        return { x: at.x + across * width * tuning.drift, y: at.y + rise * height * tuning.driftRise };
+    };
+    // When the last frame was drawn. A frame where only the drift has moved draws at half the
+    // display's rate: ample for light moving this slowly, and half of what an idle band costs.
+    let drawn = 0;
+    const IDLE_FRAME = 33;
+    /** A dot this small is drawn as a square: below a pixel and a half nobody can tell, and it is cheap. */
+    const SQUARE_BELOW = 0.75;
+    function draw() {
+        if (context === null || width === 0 || height === 0)
+            return;
+        context.clearRect(0, 0, width, height);
+        const reachX = Math.max(1, width * tuning.reachX * scale);
+        const reachY = Math.max(1, height * tuning.reachY * scale);
+        const widest = tuning.dot / 2;
+        if (widest < SMALLEST)
+            return;
+        const falloff = Math.max(0.0001, tuning.falloff);
+        // The furthest a dot can be from the glow, in reach units squared, and still be drawn: beyond
+        // it the light makes the dot smaller than SMALLEST whatever else is true. Tested before the
+        // exponential, which is the one costly operation per dot. Where the size floor keeps every dot
+        // above SMALLEST there is no such distance, and every dot is drawn.
+        const sizeFloor = Math.max(0, Math.min(1, tuning.sizeFloor));
+        const farthest = widest * sizeFloor >= SMALLEST ? Infinity : Math.log(widest / SMALLEST) / falloff;
+        const paths = Array.from({ length: STEPS }, () => new Path2D());
+        const used = new Uint8Array(STEPS);
+        // The pattern's upper edge: nothing above `top`, full from `top + topFade` down, and a smooth
+        // step between so the edge is a fade rather than a line across the band.
+        const edge = height * tuning.top;
+        const fade = Math.max(1, height * tuning.topFade);
+        // The first row below the edge, found by arithmetic rather than by testing every row above it.
+        const firstRow = Math.max(0, Math.floor((edge - startY) / pitch));
+        for (let row = firstRow; row < rows; row += 1) {
+            const homeRowY = startY + row * pitch;
+            const below = (homeRowY - edge) / fade;
+            if (below <= 0)
+                continue;
+            // A straight fade, as the rule grid's and the rings' is, so the four patterns thin out
+            // towards the top at the same rate. Like theirs it fades the ink and leaves the mark alone:
+            // the dots dim towards the top and keep their size. Shrinking them as well thinned the
+            // upper half twice over, and it read as empty beside a grid fading at the same rate.
+            const mask = below >= 1 ? 1 : below;
+            // Lit by where a dot belongs rather than where it has been knocked to, so a shoved dot keeps
+            // its brightness and the glow does not flicker as the dots move through it.
+            const dy = (homeRowY - glowY) / reachY;
+            const dy2 = dy * dy;
+            // A whole row too far from the glow to show is skipped in one test.
+            if (dy2 > farthest)
+                continue;
+            const rowAt = row * columns;
+            for (let column = 0; column < columns; column += 1) {
+                const dx = (startX + column * pitch - glowX) / reachX;
+                const d2 = dx * dx + dy2;
+                if (d2 > farthest)
+                    continue;
+                const light = Math.exp(-d2 * falloff);
+                const radius = widest * Math.max(light, sizeFloor);
+                if (radius < SMALLEST)
+                    continue;
+                // The floor keeps dots far from the glow visible inside the pattern; the mask then takes
+                // everything — floor included — down to nothing towards the pattern's edge.
+                const brightness = mask * (tuning.floor + (1 - tuning.floor) * light);
+                const at = rowAt + column;
+                const x = homeX[at] + offX[at];
+                const y = homeY[at] + offY[at];
+                const step = Math.min(STEPS - 1, (brightness * STEPS) | 0);
+                const path = paths[step];
+                if (radius < SQUARE_BELOW) {
+                    path.rect(x - radius, y - radius, radius * 2, radius * 2);
+                }
+                else {
+                    path.moveTo(x + radius, y);
+                    path.arc(x, y, radius, 0, Math.PI * 2);
+                }
+                used[step] = 1;
+            }
+        }
+        for (let step = 0; step < STEPS; step += 1) {
+            if (used[step] === 0)
+                continue;
+            context.fillStyle = fills[step];
+            context.fill(paths[step]);
+        }
+    }
+    /**
+     * How far the glow closes on its target in one frame.
+     *
+     * A chase rather than a glide. Restarting a timed glide on every pointer move kept the glow a
+     * whole glide behind a moving pointer, which read as lag. Closing a share of the remaining
+     * distance each frame keeps it just behind and always moving smoothly, and the share comes from
+     * the time the frame took, so a slow frame does not make the glow slower. The time constant is a
+     * third of `follow`: by then two thirds of the gap is closed, and by `follow` all but all of it.
+     */
+    function chase(elapsed) {
+        if (target === null)
+            return false;
+        const share = tuning.follow <= 0 ? 1 : 1 - Math.exp(-elapsed / (tuning.follow / 3));
+        glowX += (target.x - glowX) * share;
+        glowY += (target.y - glowY) * share;
+        return Math.abs(target.x - glowX) > 0.3 || Math.abs(target.y - glowY) > 0.3;
+    }
+    /**
+     * One step of every knocked dot springing home. A damped spring whose settling time is
+     * `returnDuration`; a dot within a twentieth of a pixel of home and all but still is put back
+     * exactly and leaves the list, and when the list is empty the loop can stop.
+     */
+    function spring(elapsed) {
+        if (moving.length === 0)
+            return false;
+        const seconds = Math.min(elapsed, 32) / 1000;
+        const omega = 4 / (DAMPING * Math.max(0.05, tuning.returnDuration));
+        const stiffness = omega * omega;
+        const damping = 2 * DAMPING * omega;
+        let kept = 0;
+        for (let i = 0; i < moving.length; i += 1) {
+            const at = moving[i];
+            let vx = velX[at];
+            let vy = velY[at];
+            const x = offX[at];
+            const y = offY[at];
+            vx += (-stiffness * x - damping * vx) * seconds;
+            vy += (-stiffness * y - damping * vy) * seconds;
+            const nx = x + vx * seconds;
+            const ny = y + vy * seconds;
+            if (Math.abs(nx) < 0.05 && Math.abs(ny) < 0.05 && Math.abs(vx) < 1 && Math.abs(vy) < 1) {
+                offX[at] = 0;
+                offY[at] = 0;
+                velX[at] = 0;
+                velY[at] = 0;
+                knocked[at] = 0;
+                continue;
+            }
+            offX[at] = nx;
+            offY[at] = ny;
+            velX[at] = vx;
+            velY[at] = vy;
+            moving[kept] = at;
+            kept += 1;
+        }
+        moving.length = kept;
+        return kept > 0;
+    }
+    /** Ease the glow's size towards what it should be now: smaller under a pointer, full at rest. */
+    function grow(elapsed) {
+        const wanted = resting ? 1 : tuning.hoverScale;
+        const share = tuning.follow <= 0 ? 1 : 1 - Math.exp(-elapsed / (tuning.follow / 3));
+        scale += (wanted - scale) * share;
+        if (Math.abs(wanted - scale) < 0.002) {
+            scale = wanted;
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Knock every dot within `radius` of a point, by a velocity each dot's nearness decides. Visits
+     * only the grid cells the radius can reach — a dot is never further than its own reach from home
+     * for long, so a margin of one cell is enough — rather than every dot on the band.
+     */
+    function knock(x, y, radius, kick) {
+        if (radius <= 0 || columns === 0)
+            return;
+        const squared = radius * radius;
+        const fromColumn = Math.max(0, Math.floor((x - radius - startX) / pitch) - 1);
+        const toColumn = Math.min(columns - 1, Math.ceil((x + radius - startX) / pitch) + 1);
+        const fromRow = Math.max(0, Math.floor((y - radius - startY) / pitch) - 1);
+        const toRow = Math.min(rows - 1, Math.ceil((y + radius - startY) / pitch) + 1);
+        for (let row = fromRow; row <= toRow; row += 1) {
+            for (let column = fromColumn; column <= toColumn; column += 1) {
+                const at = row * columns + column;
+                const dx = homeX[at] + offX[at] - x;
+                const dy = homeY[at] + offY[at] - y;
+                const distance = dx * dx + dy * dy;
+                if (distance > squared)
+                    continue;
+                const near = 1 - Math.sqrt(distance) / radius;
+                const [kx, ky] = kick(dx, dy, near);
+                velX[at] = velX[at] + kx;
+                velY[at] = velY[at] + ky;
+                if (knocked[at] === 0) {
+                    knocked[at] = 1;
+                    moving.push(at);
+                }
+            }
+        }
+    }
+    // The pointer, as the last event left it. Events only record it; the frame reads the band's
+    // position once and acts on it — so a fast mouse sending a hundred events a second costs one
+    // layout read a frame rather than one an event.
+    let pointer = null;
+    // Where the pointer was when the last frame acted on it, to know how fast it crossed the dots.
+    let previous = null;
+    // A press waiting for the next frame to send its ripple.
+    let pressed = null;
+    function takePointer() {
+        if (pointer === null && pressed === null)
+            return;
+        const box = root.getBoundingClientRect();
+        if (pointer !== null) {
+            const x = pointer.clientX - box.left;
+            const y = pointer.clientY - box.top;
+            // The glow follows a pointer with hover — a mouse or a pen. A touch has no hover to follow,
+            // and a glow jumping to wherever a finger lands to scroll is motion nobody asked for.
+            if (pointer.hovers) {
+                resting = false;
+                glide = null;
+                target = { x, y: Math.max(y, ceiling()) };
+            }
+            // The shove, from how fast the pointer crossed the dots near it: a pointer drifting slowly
+            // parts them a little, a flick scatters them. Divided by resistance so one setting tunes it.
+            if (previous !== null && tuning.proximity > 0) {
+                const seconds = Math.max(0.001, (pointer.time - previous.time) / 1000);
+                const speedX = (x - previous.x) / seconds;
+                const speedY = (y - previous.y) / seconds;
+                const strength = (seconds * 2000) / Math.max(1, tuning.resistance);
+                knock(x, y, tuning.proximity, (_dx, _dy, near) => [speedX * near * strength, speedY * near * strength]);
+            }
+            previous = { x, y, time: pointer.time };
+            pointer = null;
+        }
+        if (pressed !== null) {
+            // A press sends a ripple out from where it landed: every dot it reaches is pushed straight
+            // away from that point, harder the nearer it was.
+            const push = tuning.shockStrength * 60;
+            knock(pressed.clientX - box.left, pressed.clientY - box.top, tuning.shockRadius, (dx, dy, near) => {
+                const distance = Math.hypot(dx, dy) || 1;
+                return [(dx / distance) * push * near, (dy / distance) * push * near];
+            });
+            pressed = null;
+        }
+    }
+    function tick(now) {
+        frame = 0;
+        const elapsed = last === 0 ? 16 : Math.min(now - last, 64);
+        takePointer();
+        // At rest and drifting, the glow chases its point on the drift path the way it chases a
+        // pointer — so leaving the band eases it back onto the path rather than jumping to it.
+        const idle = resting && drifts();
+        if (idle) {
+            glide = null;
+            target = drifted(now);
+        }
+        const chasing = chase(elapsed);
+        const growing = grow(elapsed);
+        const springing = spring(elapsed);
+        if (glide !== null) {
+            const progress = tuning.follow <= 0 ? 1 : Math.min(1, (now - glide.start) / tuning.follow);
+            const along = ease(progress);
+            glowX = glide.fromX + (glide.toX - glide.fromX) * along;
+            glowY = glide.fromY + (glide.toY - glide.fromY) * along;
+            if (progress >= 1)
+                glide = null;
+        }
+        const settling = glide !== null || springing || growing || (chasing && !idle);
+        // Nothing but the drift is moving: draw at half rate. Anything the reader is doing — a pointer
+        // over the band, dots springing back — draws every frame.
+        const onlyDrifting = idle && !settling;
+        if (!onlyDrifting || now - drawn >= IDLE_FRAME) {
+            draw();
+            drawn = now;
+        }
+        const more = settling || idle || chasing;
+        last = more ? now : 0;
+        if (more && visible)
+            frame = requestAnimationFrame(tick);
+    }
+    function request() {
+        if (frame === 0 && visible)
+            frame = requestAnimationFrame(tick);
+    }
+    /** Back to rest along the eased curve: the pointer has gone and there is no drift to chase. */
+    function glideTo(to) {
+        target = null;
+        glide = { fromX: glowX, fromY: glowY, toX: to.x, toY: to.y, start: performance.now() };
+        request();
+    }
+    /**
+     * The highest the glow may rise, in CSS pixels from the top. Above it the glow's brightest dots
+     * would sit where the fade has thinned them, so the glow tracks the pointer across and stays
+     * below this going up. Its own setting rather than the fade's edge, now the fade spans the band.
+     */
+    const ceiling = () => height * tuning.ceiling;
+    const resize = new ResizeObserver(() => {
+        const box = root.getBoundingClientRect();
+        width = box.width;
+        height = box.height;
+        const density = Math.min(window.devicePixelRatio || 1, DENSITY_CAP);
+        canvas.width = Math.round(width * density);
+        canvas.height = Math.round(height * density);
+        context.setTransform(density, 0, 0, density, 0, 0);
+        layout();
+        // A resize moves the rest point with the band; a glow at rest goes with it at once rather than
+        // gliding, which would be motion nobody asked for.
+        if (resting) {
+            const at = idleAt(performance.now());
+            glowX = at.x;
+            glowY = at.y;
+        }
+        request();
+    });
+    /** Where a resting glow belongs now: on its drift path if it drifts, at rest if it does not. */
+    const idleAt = (now) => (drifts() ? drifted(now) : rest());
+    const sight = new IntersectionObserver((seen) => {
+        visible = seen.some((each) => each.isIntersecting);
+        if (visible)
+            request();
+        else if (frame !== 0) {
+            cancelAnimationFrame(frame);
+            frame = 0;
+            last = 0;
+        }
+    });
+    const move = (event) => {
+        if (!allowed())
+            return;
+        pointer = {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            time: event.timeStamp,
+            hovers: event.pointerType !== 'touch',
+        };
+        request();
+    };
+    const leave = (event) => {
+        pointer = null;
+        previous = null;
+        if (!allowed() || event.pointerType === 'touch')
+            return;
+        resting = true;
+        // A drifting glow is picked up by the next frame and eased back onto its path.
+        if (drifts())
+            request();
+        else
+            glideTo(rest());
+    };
+    const press = (event) => {
+        if (!allowed())
+            return;
+        pressed = { clientX: event.clientX, clientY: event.clientY };
+        request();
+    };
+    // A reader turning reduced motion on or off while the band is on screen: the drift stops or
+    // starts without waiting for the pointer.
+    const motionChanged = () => {
+        if (!allowed()) {
+            resting = true;
+            target = null;
+            glide = null;
+            pointer = null;
+            const at = rest();
+            glowX = at.x;
+            glowY = at.y;
+        }
+        request();
+    };
+    reduced?.addEventListener?.('change', motionChanged);
+    const refresh = () => {
+        const pitchChanged = Math.max(4, tuning.pitch) !== Math.max(4, { ...fromTokens, ...SETTINGS, ...overrides }.pitch);
+        settle();
+        if (pitchChanged)
+            layout();
+        if (resting) {
+            const at = idleAt(performance.now());
+            glowX = at.x;
+            glowY = at.y;
+        }
+        request();
+    };
+    settle();
+    resize.observe(root);
+    sight.observe(root);
+    const host = options.host ?? root;
+    host.addEventListener('pointermove', move, { passive: true });
+    host.addEventListener('pointerleave', leave, { passive: true });
+    host.addEventListener('pointerdown', press, { passive: true });
+    live.add(refresh);
+    return {
+        destroy: () => {
+            live.delete(refresh);
+            resize.disconnect();
+            sight.disconnect();
+            reduced?.removeEventListener?.('change', motionChanged);
+            host.removeEventListener('pointermove', move);
+            host.removeEventListener('pointerleave', leave);
+            host.removeEventListener('pointerdown', press);
+            if (frame !== 0)
+                cancelAnimationFrame(frame);
+        },
+    };
+}