@deriv-com/dds-marketing 1.0.2 → 1.1.0

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

@@ -0,0 +1,244 @@
+/**
+ * The fragment shaders behind the patterns the stylesheet can only approximate.
+ *
+ * Each is a function of where it is, the time and the light: no state, no texture, nothing to
+ * load. What they share — noise, a folded noise, the grain, the inks and measures read from the
+ * stylesheet — is in `shader.ts`. Every one ends in `grain`, which is the difference between a
+ * gradient and a surface: it gives the field a tooth, and dithers a long fade so it never bands.
+ *
+ * Inks arrive as `u_ink0` (the ground) to `u_ink5`, each pattern naming in the stylesheet what its
+ * own are, per tone. `u_strength` is how loudly it is painted on that tone.
+ */
+/** The band's coordinates, set up the same way at the top of every pattern. */
+const PLACE = `
+  vec2 frag = gl_FragCoord.xy / u_scale;
+  vec2 px = vec2(frag.x, u_size.y - frag.y);
+  vec2 uv = px / u_size;
+  float aspect = u_size.x / u_size.y;
+  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size
+  // — measured against the band's proportions, a phone-width band got one fold stretched tall. It
+  // grows a little with the band, so a full-width hero is not a field of small eddies.
+  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));
+  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));
+`;
+/**
+ * The aurora: curtains of light rising from the band's foot.
+ *
+ * Sheets of noise stretched upright, swaying as a slower noise moves under them, with a ragged
+ * crest and fine rays running up through them — light falling through folds rather than pools of
+ * colour. The pointer bends the sheets towards it and brightens them where it is.
+ */
+export const AURORA = `
+void main() {
+  ${PLACE}
+  vec2 p = vec2(field.x, uv.y);
+  float t = u_time * 0.06;
+
+  vec2 toward = vec2(field.x - lamp0.x, uv.y - u_pointer.y);
+  float near = exp(-dot(toward, toward) * 5.0) * u_hover;
+
+  float sway = fbm(vec2(p.x * 0.8 + t, t * 0.7)) - 0.5;
+  float x = p.x * 1.5 + sway * 1.6 - toward.x * near * 0.8;
+
+  float folds = fbm(vec2(x * 2.2, p.y * 0.35 - t * 1.6));
+  float curtain = smoothstep(0.3, 0.72, folds);
+  float rays = 0.6 + 0.4 * noise(vec2(x * 26.0, p.y * 1.4 - t * 3.0));
+
+  float crest = 0.08 + 0.38 * fbm(vec2(x * 1.2 + 4.0, t * 0.8));
+  float rise = smoothstep(crest, 0.82, uv.y);
+  float base = smoothstep(0.55, 1.0, uv.y);
+
+  float light = (curtain * rays * rise + base * 0.3 + near * 0.45) * u_strength;
+
+  vec3 tint = mix(u_ink1, u_ink2, smoothstep(0.3, 0.8, fbm(vec2(x * 1.1 - 3.0, p.y * 0.8 + t))));
+  tint = mix(tint, u_ink3, pow(clamp(curtain * rise, 0.0, 1.0), 2.5) * 0.65);
+
+  vec3 colour = mix(u_ink0, tint, clamp(light, 0.0, 1.0));
+  gl_FragColor = vec4(grain(colour, gl_FragCoord.xy), 1.0);
+}
+`;
+/**
+ * The mesh: the design system's own front page — five soft pools of the brand's reds, run together.
+ *
+ * The same drawing as the front page's panel and as this pattern's stylesheet version: each pool
+ * in its place, its red, its size, drifting and stretching on loops of its own length, and leaning
+ * towards the pointer at its own depth, so the colours slide through one another rather than moving
+ * as one. Where the stylesheet blurs five shapes, this draws each as a soft-edged pool outright —
+ * an uneven round whose outline wobbles as it turns — and lays them over the ground in order.
+ *
+ * The first pool is the deepest red, held back by `u_shade` so the words keep a red to stand on.
+ */
+export const MESH = `
+// One pool: where it rests, in shares of the band; how big, in shares of its longer side; how far it leans after the
+// pointer; and its loops — the drift and the stretch — in seconds, offset by a phase of its own.
+float pool(vec2 px, vec2 at, float size, float depth, float drift, float morph, float phase) {
+  // Sized by the band's longer side rather than its width: on a phone the band is tall and narrow,
+  // and pools sized by its width came out small — the deepest a hard, dark blot in one corner and
+  // the rest of the band flat. Measured against the longer side they cover a tall band as they do
+  // a wide one.
+  float w = max(u_size.x, u_size.y);
+  float t = u_time;
+  float tau = 6.2831853;
+
+  // The drift: a slow wander and a swell, there and back.
+  vec2 wander = vec2(
+    0.10 * sin(tau * t / drift + phase),
+    0.08 * sin(tau * t / (drift * 1.3) + phase * 1.7)
+  ) * size * w;
+  float swell = 1.0 + 0.1 * sin(tau * t / (drift * 0.8) + phase * 0.6);
+
+  // Leaning after the pointer by its depth, a hundredth of the pool per step, as the front page's do.
+  vec2 lean = (u_pointer - 0.5) * 2.0 * u_hover * depth * 0.01 * size * w;
+
+  vec2 centre = at * u_size + wander + lean;
+  vec2 d = px - centre;
+
+  // The stretch: one way then the other, turning as it goes.
+  float turn = 1.4 * sin(tau * t / (morph * 2.0) + phase);
+  float c = cos(turn);
+  float s = sin(turn);
+  d = mat2(c, -s, s, c) * d;
+  float stretch = sin(tau * t / morph + phase);
+  d /= vec2(1.0 + 0.18 * stretch, 1.0 - 0.15 * stretch);
+
+  // An uneven round, its outline wobbling as it turns.
+  float angle = atan(d.y, d.x);
+  float radius = size * w * 0.5 * swell * (1.0 + 0.1 * sin(3.0 * angle + phase) + 0.06 * sin(5.0 * angle - phase * 2.0));
+  float r = length(d) / radius;
+  // Soft all the way out: a blur's falloff rather than an edge.
+  return exp(-r * r * 1.1);
+}
+
+void main() {
+  ${PLACE}
+  vec3 c = u_ink0;
+  // The deepest red, off the near side low down — a shade under the words, held back.
+  c = mix(c, u_ink1, pool(px, vec2(0.06, 0.82), 0.62, -8.0, 26.0, 13.0, 0.0) * u_shade * u_strength);
+  // The pressed red, high in the far corner, the largest.
+  c = mix(c, u_ink2, pool(px, vec2(0.92, -0.08), 0.85, 10.0, 31.0, 9.0, 1.7) * u_strength);
+  // The hover red, through the middle.
+  c = mix(c, u_ink3, pool(px, vec2(0.6, 0.5), 0.62, 16.0, 22.0, 7.0, 3.1) * u_strength);
+  // The pressed red again, swelling up from the foot.
+  c = mix(c, u_ink4, pool(px, vec2(0.5, 1.1), 0.75, -12.0, 35.0, 12.0, 4.4) * u_strength);
+  // The coral itself, high in the far corner: the brightest the pools go.
+  c = mix(c, u_ink5, pool(px, vec2(0.74, 0.06), 0.42, 20.0, 28.0, 8.0, 5.9) * u_strength);
+
+  // A little more colour, as the front page's blur saturates its pools.
+  float grey = dot(c, vec3(0.299, 0.587, 0.114));
+  c = mix(vec3(grey), c, 1.15);
+
+  gl_FragColor = vec4(grain(clamp(c, 0.0, 1.0), gl_FragCoord.xy), 1.0);
+}
+`;
+/**
+ * The lines the grid and the rings share: a hairline at an exact width, anti-aliased by its
+ * distance in device pixels rather than by a blur, so it stays a hairline at any density.
+ */
+const HAIRLINE = `
+float hairline(float distance) {
+  float halfWidth = u_hairline * 0.5;
+  float pixel = 1.0 / u_scale;
+  return 1.0 - smoothstep(halfWidth, halfWidth + pixel, distance);
+}
+
+// A soft bloom at the middle of the band's foot — where the halftone's glow rests — so the lines
+// rise out of light rather than out of a flat ground.
+float bloom(vec2 uv) {
+  vec2 d = vec2((uv.x - 0.5) * 1.5, (1.0 - uv.y) * 2.2);
+  return exp(-dot(d, d));
+}
+
+// The pointer's light, a soft circle a pitch and a half across.
+float lamp(vec2 px) {
+  vec2 d = px - u_pointer * u_size;
+  float reach = u_pitch * 1.6;
+  return exp(-dot(d, d) / (reach * reach)) * u_hover;
+}
+
+// A short bright dash running along a line, at a place along it, fading off behind.
+float dash(float along) {
+  return smoothstep(0.0, 0.06, along) * (1.0 - smoothstep(0.06, 0.3, along));
+}
+`;
+/**
+ * The grid: hairlines a pitch apart, rising from the foot as they did, now lit.
+ *
+ * A bloom at the foot they rise out of, a brighter point where two lines cross, and every few
+ * lines a short dash of light running along it — up a rule, across another — at a pace of its
+ * own, so the grid reads as carrying something. The pointer lights the lines around it.
+ */
+export const GRID = `
+${HAIRLINE}
+void main() {
+  ${PLACE}
+  float pitch = u_pitch;
+  float shift = mod(u_time / 10.0, 1.0) * pitch;
+  vec2 g = vec2(px.x - u_size.x * 0.5 + pitch * 0.5, px.y + shift);
+  vec2 d = abs(fract(g / pitch) - 0.5) * pitch;
+  vec2 lines = vec2(hairline(pitch * 0.5 - d.x), hairline(pitch * 0.5 - d.y));
+  float line = max(lines.x, lines.y);
+  float meet = lines.x * lines.y;
+
+  vec2 cell = floor(g / pitch);
+  float upward = fract(px.y / (pitch * 7.0) + u_time * 0.07 + hash(vec2(cell.x, 3.1)));
+  float across = fract(px.x / (pitch * 9.0) - u_time * 0.05 + hash(vec2(cell.y, 7.7)));
+  float pulses =
+    lines.x * dash(upward) * step(0.7, hash(vec2(cell.x, 9.7))) +
+    lines.y * dash(across) * step(0.78, hash(vec2(cell.y, 4.2)));
+
+  float fade = smoothstep(0.0, 1.0, uv.y);
+  float glow = bloom(uv);
+  float lit = lamp(px);
+
+  vec3 c = mix(u_ink0, u_ink3, glow * 0.45 * u_strength);
+  c = mix(c, u_ink1, line * fade * (0.55 + 0.45 * glow) * u_strength);
+  c = mix(c, u_ink2, clamp(pulses * fade + line * lit + meet * fade * 0.35, 0.0, 1.0) * u_strength);
+
+  gl_FragColor = vec4(grain(c, gl_FragCoord.xy), 1.0);
+}
+`;
+/**
+ * The rings: circles spreading from the middle of the band's foot, now lit.
+ *
+ * The same bloom at the foot, and on every ring a few arcs of light travelling round it, each ring
+ * its own way and pace, so the rings shimmer as they spread. The pointer lights the rings around it.
+ */
+export const RINGS = `
+${HAIRLINE}
+void main() {
+  ${PLACE}
+  float pitch = u_pitch;
+  vec2 centre = vec2(u_size.x * 0.5, u_size.y);
+  vec2 from = px - centre;
+  float radius = length(from);
+  float shift = mod(u_time / 10.0, 1.0) * pitch;
+  float place = (radius - shift) / pitch;
+  float d = abs(fract(place) - 0.5) * pitch;
+  float line = hairline(pitch * 0.5 - d);
+
+  float ring = floor(place);
+  float angle = atan(from.x, -from.y);
+  float turn = (hash(vec2(ring, 1.7)) > 0.5 ? 1.0 : -1.0) * (0.15 + 0.25 * hash(vec2(ring, 5.3)));
+  float arc = noise(vec2(angle * 3.0 + u_time * turn, ring * 3.1));
+  float sparkle = line * smoothstep(0.62, 0.9, arc);
+
+  float fade = smoothstep(0.0, 1.0, uv.y);
+  float glow = bloom(uv);
+  float lit = lamp(px);
+
+  vec3 c = mix(u_ink0, u_ink3, glow * 0.45 * u_strength);
+  c = mix(c, u_ink1, line * fade * (0.55 + 0.45 * glow) * u_strength);
+  c = mix(c, u_ink2, clamp(sparkle * fade + line * lit, 0.0, 1.0) * u_strength);
+
+  gl_FragColor = vec4(grain(c, gl_FragCoord.xy), 1.0);
+}
+`;
+/** Each pattern's shader and the highest density it draws at: soft fields need little, hairlines two. */
+export const SHADERS = {
+    // The two heaviest, and the two softest: drawn at half the CSS density and scaled up by the
+    // browser, a quarter of the pixels for a field that has no edge for the scaling to soften.
+    aurora: { fragment: AURORA, density: 0.5 },
+    mesh: { fragment: MESH, density: 0.5 },
+    grid: { fragment: GRID, density: 2 },
+    rings: { fragment: RINGS, density: 2 },
+};

package/dist/components/core/background/shader.d.ts

@@ -0,0 +1,44 @@
+/**
+ * A pattern drawn by a fragment shader, on a canvas, and only when it has to be.
+ *
+ * The aurora, the mesh, the grid and the rings are painted here when the browser can run
+ * WebGL — light with structure in it, noise folded into noise, a grain over all of it — and by the
+ * stylesheet when it cannot. The stylesheet's version is drawn first and stays until this has drawn
+ * a frame, so a band is finished from the first paint and the shader only ever replaces it: the root
+ * is marked `data-shaded` once a frame is on the canvas, and the stylesheet hides its own paint then.
+ *
+ * What it costs, and why it is written this way:
+ *
+ * - One full-band triangle and one fragment shader: the whole frame is a single draw call.
+ * - It draws while the band is on screen and something moves — the pattern at rest, or the light
+ *   catching up with the pointer — and not otherwise. A band out of view draws nothing; a band
+ *   asked to hold still draws one frame and stops.
+ * - The soft patterns are drawn at the CSS pixel density or below — the two heaviest at half of
+ *   it, scaled up by the browser — which is all a field with no edge in it can use; the hairline
+ *   patterns at up to twice it, which their lines need.
+ * - At rest it draws at half the display's rate. Under the pointer, at its full rate.
+ * - For a reader who asked for less motion it draws one frame and never moves.
+ * - A lost context puts the stylesheet's paint back and stops; the next mount draws afresh.
+ *
+ * Every colour comes from a token: the stylesheet names each pattern's inks as custom properties on
+ * the band, per tone, and they are read back as the browser resolved them.
+ */
+export interface ShaderOptions {
+    /** The fragment shader's body — see `PRELUDE` for what it may use. */
+    fragment: string;
+    /** The custom properties holding the pattern's inks, ground first. */
+    inks: readonly string[];
+    /** The highest pixel density to draw at. A soft field wants less than a hairline does. */
+    density: number;
+    /** Whether the pattern answers the pointer. Ignored for reduced motion. */
+    interactive: boolean;
+    /** Whether the pattern moves at rest. Ignored for reduced motion. */
+    animated: boolean;
+    /** Where the pointer is listened for, when that is not the band itself. */
+    host?: HTMLElement;
+}
+export interface Shader {
+    /** Stop listening, stop drawing, give back the context, and put the stylesheet's paint back. */
+    destroy: () => void;
+}
+export declare function shader(root: HTMLElement, canvas: HTMLCanvasElement, options: ShaderOptions): Shader;

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

@@ -0,0 +1,307 @@
+'use client';
+/**
+ * What every pattern's shader is given. Positions are in the band's own terms: `uv` runs 0 to 1 left
+ * to right and top to bottom, `px` is the same point in CSS pixels, and the pointer is in `uv`.
+ */
+const PRELUDE = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+uniform vec2 u_size;      // the band, in CSS pixels
+uniform float u_scale;    // device pixels to the CSS pixel, as drawn
+uniform float u_time;     // seconds of motion so far
+uniform vec2 u_pointer;   // where the light is, eased after the pointer, in uv
+uniform float u_hover;    // 0 to 1, how present the pointer is, eased
+uniform float u_strength; // how strongly the pattern is painted on this ground
+uniform float u_grain;    // how much grain is laid over it
+uniform float u_pitch;    // a length the pattern repeats at, in CSS pixels, where it has one
+uniform float u_hairline; // a hairline's width, in CSS pixels
+uniform float u_shade;    // how far a pattern's deepest ink is held back, where it has one
+uniform vec3 u_ink0;      // the ground
+uniform vec3 u_ink1;
+uniform vec3 u_ink2;
+uniform vec3 u_ink3;
+uniform vec3 u_ink4;
+uniform vec3 u_ink5;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+// Value noise with a quintic fade, smooth to the second derivative so no crease shows in a fold.
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
+}
+
+// Four octaves, each turned against the last, so the layers never line up into a grid. A fifth
+// added detail too fine to see under the grain, at a fifth more of the cost.
+float fbm(vec2 p) {
+  float sum = 0.0;
+  float amp = 0.5;
+  mat2 turn = mat2(0.8, 0.6, -0.6, 0.8);
+  for (int k = 0; k < 4; k++) {
+    sum += amp * noise(p);
+    p = turn * p * 2.03 + 17.1;
+    amp *= 0.5;
+  }
+  return sum;
+}
+
+// A grain that changes every frame, and the dither that keeps a long gradient from banding.
+vec3 grain(vec3 colour, vec2 frag) {
+  float n = hash(frag + fract(u_time * 7.13) * 91.7) - 0.5;
+  return colour + n * u_grain;
+}
+`;
+const VERTEX = `
+attribute vec2 a_position;
+void main() { gl_Position = vec4(a_position, 0.0, 1.0); }
+`;
+/** A computed colour as linear-ish RGB from 0 to 1. Accepts rgb(), rgba() and color(srgb …). */
+function channels(value) {
+    const numbers = value.match(/-?[\d.]+/g)?.map(Number) ?? [];
+    if (value.startsWith('color('))
+        return [numbers[0] ?? 0, numbers[1] ?? 0, numbers[2] ?? 0];
+    return [(numbers[0] ?? 0) / 255, (numbers[1] ?? 0) / 255, (numbers[2] ?? 0) / 255];
+}
+/** A custom property's colour, as the browser resolves it on this element. */
+function ink(element, property) {
+    const before = element.style.color;
+    element.style.color = `var(${property})`;
+    const resolved = getComputedStyle(element).color;
+    element.style.color = before;
+    return channels(resolved);
+}
+function numberOf(element, property, fallback) {
+    const parsed = Number.parseFloat(getComputedStyle(element).getPropertyValue(property));
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function milliseconds(value, fallback) {
+    const amount = Number.parseFloat(value);
+    if (!Number.isFinite(amount))
+        return fallback;
+    return /ms$/i.test(value.trim()) ? amount : amount * 1000;
+}
+function compile(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (shader === null)
+        return null;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        // A pattern that does not compile falls back to the stylesheet; say why, once, for whoever is
+        // writing the shader.
+        console.warn('Background shader:', gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+    }
+    return shader;
+}
+export function shader(root, canvas, options) {
+    const nothing = { destroy: () => { } };
+    const gl = canvas.getContext('webgl', { alpha: false, antialias: false, premultipliedAlpha: false, powerPreference: 'low-power' });
+    if (gl === null)
+        return nothing;
+    const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
+    const fragment = compile(gl, gl.FRAGMENT_SHADER, PRELUDE + options.fragment);
+    if (vertex === null || fragment === null)
+        return nothing;
+    const program = gl.createProgram();
+    if (program === null)
+        return nothing;
+    gl.attachShader(program, vertex);
+    gl.attachShader(program, fragment);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+        return nothing;
+    gl.useProgram(program);
+    // One triangle larger than the screen: every pixel of the band, one draw.
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const position = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    const at = (name) => gl.getUniformLocation(program, name);
+    const u = {
+        size: at('u_size'),
+        scale: at('u_scale'),
+        time: at('u_time'),
+        pointer: at('u_pointer'),
+        hover: at('u_hover'),
+        strength: at('u_strength'),
+        grain: at('u_grain'),
+        pitch: at('u_pitch'),
+        hairline: at('u_hairline'),
+        shade: at('u_shade'),
+        inks: [0, 1, 2, 3, 4, 5].map((k) => at(`u_ink${k}`)),
+    };
+    const still = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const moving = options.animated && !still;
+    const answering = options.interactive && !still;
+    /** Everything read from the stylesheet: the inks, the strengths, the measures, the timing. */
+    let follow = 500;
+    const read = () => {
+        options.inks.forEach((property, k) => {
+            const location = u.inks[k];
+            if (location !== undefined)
+                gl.uniform3fv(location, ink(root, property));
+        });
+        gl.uniform1f(u.strength, numberOf(root, '--dds-background-gl-strength', 1));
+        gl.uniform1f(u.grain, numberOf(root, '--dds-background-gl-grain', 0.04));
+        gl.uniform1f(u.pitch, numberOf(root, '--dds-background-gl-pitch', 96));
+        gl.uniform1f(u.hairline, numberOf(root, '--dds-background-gl-hairline', 1));
+        // Read off the mesh's own element, which is where the stylesheet keeps it per tone.
+        const mesh = root.querySelector('.dds-background__mesh') ?? root;
+        gl.uniform1f(u.shade, numberOf(mesh, '--dds-background-mesh-shade', 1));
+        gl.uniform1f(u.shade, numberOf(root, '--dds-background-mesh-shade', 1));
+        follow = milliseconds(getComputedStyle(root).getPropertyValue('--motion-duration-trail'), 500);
+    };
+    let width = 0;
+    let height = 0;
+    const resize = () => {
+        const box = root.getBoundingClientRect();
+        width = Math.max(1, box.width);
+        height = Math.max(1, box.height);
+        const density = Math.min(window.devicePixelRatio || 1, options.density);
+        canvas.width = Math.round(width * density);
+        canvas.height = Math.round(height * density);
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        gl.uniform2f(u.size, width, height);
+        gl.uniform1f(u.scale, density);
+    };
+    // Where the light is and where it is going. It rests a little above the middle of the band's foot.
+    const rest = { x: 0.5, y: 0.85 };
+    const light = { ...rest, hover: 0 };
+    const target = { ...rest, hover: 0 };
+    let time = 0;
+    let last = 0;
+    let frame = 0;
+    let visible = true;
+    let drawn = false;
+    let lost = false;
+    let skip = false;
+    const draw = (now) => {
+        frame = 0;
+        if (lost)
+            return;
+        const step = last === 0 ? 0 : Math.min(0.1, (now - last) / 1000);
+        last = now;
+        // At rest it moves only if asked to; under the pointer it moves either way — a band asked to
+        // hold still flows while somebody is over it, and stops where it is when they leave.
+        const flowing = moving || (answering && target.hover > 0);
+        if (flowing)
+            time = (time + step) % 3600;
+        // Ease the light after its target: most of the gap closed within the trail duration.
+        const ease = step === 0 ? 1 : 1 - Math.exp((-step * 1000 * 3) / follow);
+        light.x += (target.x - light.x) * ease;
+        light.y += (target.y - light.y) * ease;
+        light.hover += (target.hover - light.hover) * ease;
+        const settling = Math.abs(target.x - light.x) + Math.abs(target.y - light.y) + Math.abs(target.hover - light.hover) > 0.001;
+        gl.uniform1f(u.time, time);
+        gl.uniform2f(u.pointer, light.x, light.y);
+        gl.uniform1f(u.hover, light.hover);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        if (!drawn) {
+            drawn = true;
+            root.dataset['shaded'] = 'true';
+        }
+        // Keep going while there is something to show: the pattern moving, or the light still arriving.
+        if (visible && (flowing || settling))
+            schedule(settling);
+    };
+    // At rest, every other frame; while the light is arriving, every frame.
+    const schedule = (urgent) => {
+        if (frame !== 0)
+            return;
+        frame = requestAnimationFrame((now) => {
+            skip = !skip;
+            if (!urgent && skip) {
+                frame = 0;
+                schedule(false);
+                return;
+            }
+            draw(now);
+        });
+    };
+    read();
+    resize();
+    schedule(true);
+    const sizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => {
+        resize();
+        schedule(true);
+    });
+    sizes?.observe(root);
+    const sight = typeof IntersectionObserver === 'undefined'
+        ? null
+        : new IntersectionObserver(([entry]) => {
+            visible = entry?.isIntersecting ?? true;
+            last = 0;
+            if (visible)
+                schedule(true);
+        });
+    sight?.observe(root);
+    // A tone or a theme that changes under the band changes its inks.
+    const restyle = new MutationObserver(() => {
+        read();
+        schedule(true);
+    });
+    restyle.observe(root, { attributes: true, attributeFilter: ['data-tone'] });
+    const themed = root.closest('[data-theme]');
+    if (themed !== null)
+        restyle.observe(themed, { attributes: true, attributeFilter: ['data-theme'] });
+    const host = options.host ?? root;
+    const move = (event) => {
+        if (event.pointerType === 'touch')
+            return;
+        const box = root.getBoundingClientRect();
+        target.x = (event.clientX - box.left) / box.width;
+        target.y = (event.clientY - box.top) / box.height;
+        target.hover = 1;
+        schedule(true);
+    };
+    const leave = () => {
+        target.x = rest.x;
+        target.y = rest.y;
+        target.hover = 0;
+        schedule(true);
+    };
+    if (answering) {
+        host.addEventListener('pointermove', move, { passive: true });
+        host.addEventListener('pointerleave', leave, { passive: true });
+    }
+    const onLost = (event) => {
+        event.preventDefault();
+        lost = true;
+        delete root.dataset['shaded'];
+    };
+    canvas.addEventListener('webglcontextlost', onLost);
+    return {
+        destroy: () => {
+            if (frame !== 0)
+                cancelAnimationFrame(frame);
+            sizes?.disconnect();
+            sight?.disconnect();
+            restyle.disconnect();
+            host.removeEventListener('pointermove', move);
+            host.removeEventListener('pointerleave', leave);
+            canvas.removeEventListener('webglcontextlost', onLost);
+            delete root.dataset['shaded'];
+            gl.deleteProgram(program);
+            gl.deleteShader(vertex);
+            gl.deleteShader(fragment);
+            gl.deleteBuffer(buffer);
+        },
+    };
+}

package/dist/components/core/background/use-shader.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+import { type ShadedPattern } from './patterns.js';
+/**
+ * A shaded pattern mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ * `pattern` undefined mounts nothing — the halftone, which has its own painter.
+ */
+export declare function useShader<Band extends HTMLElement>(band: RefObject<Band | null>, pattern: ShadedPattern | undefined, interactive: boolean, animated: boolean, 
+/** Anything whose change should re-read the inks — a tone. */
+key?: string, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent?: boolean): RefObject<HTMLCanvasElement | null>;

package/dist/components/core/background/use-shader.js

@@ -0,0 +1,25 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { SHADERS } from './patterns.js';
+import { shader } from './shader.js';
+/** The inks every shaded pattern reads, ground first; the stylesheet sets them per pattern and tone. */
+const INKS = [0, 1, 2, 3, 4, 5].map((k) => `--dds-background-gl-ink${k}`);
+/**
+ * A shaded pattern mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ * `pattern` undefined mounts nothing — the halftone, which has its own painter.
+ */
+export function useShader(band, pattern, interactive, animated, 
+/** Anything whose change should re-read the inks — a tone. */
+key, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent = false) {
+    const canvas = useRef(null);
+    useEffect(() => {
+        if (pattern === undefined || band.current === null || canvas.current === null)
+            return undefined;
+        const host = onParent ? (band.current.parentElement ?? undefined) : undefined;
+        const { fragment, density } = SHADERS[pattern];
+        return shader(band.current, canvas.current, { fragment, density, inks: INKS, interactive, animated, host }).destroy;
+    }, [band, pattern, interactive, animated, key, onParent]);
+    return canvas;
+}

package/dist/components/core/background/use-spotlight.d.ts

@@ -2,7 +2,8 @@ import { type RefObject } from 'react';
 /**
  * The pointer's light on a pattern the stylesheet paints: where the pointer is, written onto the
  * band as two custom properties the stylesheet centres its light on — a brighter copy of the grid
- * or the rings, the aurora's trailing pool — and whether it is over the band.
+ * or the rings, the aurora's trailing pool — the same place as a lean from the middle, which the
+ * mesh's pools follow, and whether it is over the band.
  *
  * Events only record the pointer; the position is written once a frame, so a fast mouse costs one
  * style write a frame rather than one per event. Nothing runs while the pointer is elsewhere. A

package/dist/components/core/background/use-spotlight.js

@@ -3,7 +3,8 @@ import { useEffect } from 'react';
 /**
  * The pointer's light on a pattern the stylesheet paints: where the pointer is, written onto the
  * band as two custom properties the stylesheet centres its light on — a brighter copy of the grid
- * or the rings, the aurora's trailing pool — and whether it is over the band.
+ * or the rings, the aurora's trailing pool — the same place as a lean from the middle, which the
+ * mesh's pools follow, and whether it is over the band.
  *
  * Events only record the pointer; the position is written once a frame, so a fast mouse costs one
  * style write a frame rather than one per event. Nothing runs while the pointer is elsewhere. A
@@ -27,6 +28,10 @@ onParent = false) {
             const box = root.getBoundingClientRect();
             root.style.setProperty('--dds-background-spot-x', `${clientX - box.left}px`);
             root.style.setProperty('--dds-background-spot-y', `${clientY - box.top}px`);
+            // And as a lean, -1 to 1 each way from the band's middle, for the mesh's pools to follow by
+            // their depth: CSS cannot divide one length by another to get there itself.
+            root.style.setProperty('--dds-background-lean-x', String(((clientX - box.left) / box.width) * 2 - 1));
+            root.style.setProperty('--dds-background-lean-y', String(((clientY - box.top) / box.height) * 2 - 1));
         };
         const move = (event) => {
             if (event.pointerType === 'touch')
@@ -51,6 +56,9 @@ onParent = false) {
         };
         const leave = () => {
             delete root.dataset['spotlit'];
+            // The mesh's pools ease back to where they rest.
+            root.style.removeProperty('--dds-background-lean-x');
+            root.style.removeProperty('--dds-background-lean-y');
         };
         host.addEventListener('pointermove', move, { passive: true });
         host.addEventListener('pointerleave', leave, { passive: true });