@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/core/background/background-impl.css

@@ -276,7 +276,14 @@
   --dds-background-pool: var(--color-fg-on-brand);
   --dds-background-pool-deep: var(--color-bg-brand-active);
   --dds-background-strength: 0.6;
-  --dds-background-hover: 0.2;
+  /*
+   * The pointer's pool on the coral is blended in rather than laid over: white at a fifth on top of
+   * the coral read as a pale pink patch, a disc of another colour. Overlay lifts the coral under it
+   * to a brighter coral instead — light on the band rather than a stain on it — and takes the whole
+   * pool without washing out: soft light at full strength was barely there.
+   */
+  --dds-background-hover: 1;
+  --dds-background-glow-blend: overlay;
 }
 
 /*
@@ -351,6 +358,13 @@
     calc(var(--dds-background-spot-x, 50%) - var(--size-aurora-spotlight)),
     calc(var(--dds-background-spot-y, 50%) - var(--size-aurora-spotlight))
   );
+  /*
+   * And blurred by a quarter of its radius, so no step of the fade survives as a ring and the pool
+   * has no edge at all — the eased stops alone still left a disc the eye could trace on the coral.
+   * Half the radius spread it so thin it all but vanished.
+   */
+  filter: blur(calc(var(--size-aurora-spotlight) / 4));
+  mix-blend-mode: var(--dds-background-glow-blend, normal);
   opacity: 0;
   transition-property: opacity, transform;
   transition-duration: var(--motion-duration-normal), var(--motion-duration-instant);
@@ -425,3 +439,322 @@
     transition: none;
   }
 }
+
+/*
+ * The mesh, for `pattern="mesh"`: the whole band lit by five pools of the brand's reds that run
+ * into one another like liquid — the design system's own front page, as a pattern.
+ *
+ * The layer overhangs the band by a tenth each side and is blurred by size.mesh.blur, so no pool
+ * keeps an edge and the layer's own edge falls outside the band. It sits behind the content by a
+ * negative stacking order, which the root's isolation keeps inside the band.
+ *
+ * The inks are the tone's, set here as five custom properties because each pool takes a different
+ * one. On the coral ground, the drawing the pattern was made for: the brand's deepest red, its
+ * pressed red twice, its hover, and the coral itself — no white, which washed the reds to pink. On
+ * the dark ground the same reds glowing on near-black, the deepest swapped for the coral so the
+ * glow has somewhere to start. On the light ground a blush: the coral and its pale tint, held back.
+ */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__mesh {
+  --dds-background-mesh-1: var(--color-bg-brand-deep);
+  --dds-background-mesh-2: var(--color-bg-brand-active);
+  --dds-background-mesh-3: var(--color-bg-brand-hover);
+  --dds-background-mesh-4: var(--color-bg-brand-active);
+  --dds-background-mesh-5: var(--color-bg-brand);
+  /* The deepest pool is a shade under the words, not a ground of its own: at 0.85 it turned half
+     the band brown, at 0.35 it left the words on a flat red. */
+  --dds-background-mesh-shade: 0.55;
+  --dds-background-mesh-strength: 1;
+  inset: -10%;
+  z-index: -1;
+  filter: blur(var(--size-mesh-blur)) saturate(1.15);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='dark'] .dds-background__mesh {
+  --dds-background-mesh-1: var(--color-bg-brand);
+  --dds-background-mesh-shade: 0.7;
+  --dds-background-mesh-strength: 0.6;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] .dds-background__mesh {
+  --dds-background-mesh-1: var(--color-bg-brand-subtle);
+  --dds-background-mesh-2: var(--color-bg-brand);
+  --dds-background-mesh-3: var(--color-bg-brand-subtle);
+  --dds-background-mesh-4: var(--color-bg-brand-hover);
+  --dds-background-mesh-5: var(--color-bg-brand-subtle);
+  --dds-background-mesh-shade: 1;
+  --dds-background-mesh-strength: 0.22;
+}
+
+/*
+ * A pool: an uneven round shape that drifts and stretches on two loops of its own length, and
+ * leans towards the pointer by its own depth — a hundredth of the pool per step — trailing it by
+ * its own lag, so the colours slide through one another instead of moving as one.
+ *
+ * Every length of time is a multiple of a motion token, so the mesh keeps pace with the others:
+ * the loops of motion.duration.drift, the lag of motion.duration.trail.
+ *
+ * The drift is a transform and the stretch a `scale` and `rotate`, all the compositor's to move;
+ * a changing `border-radius` repainted the whole blurred layer every frame.
+ */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool {
+  --depth: 6;
+  --lag: 2.8;
+  inline-size: 60%;
+  aspect-ratio: 1;
+  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
+  opacity: var(--dds-background-mesh-strength);
+  animation:
+    dds-background-mesh-drift calc(var(--motion-duration-drift) * 2.6) ease-in-out infinite alternate,
+    dds-background-mesh-morph calc(var(--motion-duration-drift) * 1.1) ease-in-out infinite alternate;
+  translate:
+    calc(var(--dds-background-lean-x, 0) * var(--depth) * 1%)
+    calc(var(--dds-background-lean-y, 0) * var(--depth) * 1%);
+  transition-property: translate;
+  transition-duration: calc(var(--motion-duration-trail) * var(--lag));
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(1) {
+  --depth: -8;
+  --lag: 4.4;
+  inset: 45% auto auto -5%;
+  inline-size: 45%;
+  background-color: var(--dds-background-mesh-1);
+  opacity: calc(var(--dds-background-mesh-strength) * var(--dds-background-mesh-shade));
+  animation-duration: calc(var(--motion-duration-drift) * 2.6), calc(var(--motion-duration-drift) * 1.3);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(2) {
+  --depth: 10;
+  --lag: 3.2;
+  inset: -20% -15% auto auto;
+  background-color: var(--dds-background-mesh-2);
+  animation-duration: calc(var(--motion-duration-drift) * 3.1), calc(var(--motion-duration-drift) * 0.9);
+  animation-delay: calc(var(--motion-duration-drift) * -0.8), calc(var(--motion-duration-drift) * -0.3);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(3) {
+  --depth: 16;
+  --lag: 2;
+  inset: 30% 20% auto auto;
+  inline-size: 45%;
+  background-color: var(--dds-background-mesh-3);
+  animation-duration: calc(var(--motion-duration-drift) * 2.2), calc(var(--motion-duration-drift) * 0.7);
+  animation-delay: calc(var(--motion-duration-drift) * -1.4), calc(var(--motion-duration-drift) * -0.5);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(4) {
+  --depth: -12;
+  --lag: 5.2;
+  inset: auto auto -30% 25%;
+  inline-size: 50%;
+  background-color: var(--dds-background-mesh-4);
+  animation-duration: calc(var(--motion-duration-drift) * 3.5), calc(var(--motion-duration-drift) * 1.2);
+  animation-delay: calc(var(--motion-duration-drift) * -0.4), calc(var(--motion-duration-drift) * -0.9);
+}
+
+/* The coral itself, high in the far corner: the brightest the pools go. */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(5) {
+  --depth: 20;
+  --lag: 1.6;
+  inset: -5% 10% auto auto;
+  inline-size: 30%;
+  background-color: var(--dds-background-mesh-5);
+  animation-duration: calc(var(--motion-duration-drift) * 2.8), calc(var(--motion-duration-drift) * 0.8);
+  animation-delay: calc(var(--motion-duration-drift) * -1.8), calc(var(--motion-duration-drift) * -0.2);
+}
+
+@keyframes dds-background-mesh-drift {
+  0% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(12%, -8%) scale(1.15); }
+  66% { transform: translate(-10%, 10%) scale(0.9); }
+  100% { transform: translate(8%, 6%) scale(1.08); }
+}
+
+@keyframes dds-background-mesh-morph {
+  0% { scale: 1 1; rotate: 0deg; }
+  33% { scale: 1.25 0.8; rotate: 50deg; }
+  66% { scale: 0.85 1.2; rotate: 110deg; }
+  100% { scale: 1.15 0.9; rotate: 160deg; }
+}
+
+/*
+ * Off screen the pools wait where they are. With `animated` off they rest, and flow only while the
+ * pointer is over the band — the front page's own setting — stopping where they are when it leaves
+ * rather than jumping home.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-offscreen='true'] .dds-background__pool,
+:where([data-dds-context="marketing"]) .dds-background[data-animated='false'] .dds-background__pool {
+  animation-play-state: paused;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-animated='false'][data-spotlit='true'] .dds-background__pool {
+  animation-play-state: running;
+}
+
+/* For a reader who asked for less motion the pools hold still and do not follow the pointer. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-background .dds-background__pool {
+    animation: none;
+    translate: none;
+    transition: none;
+  }
+}
+
+/*
+ * The shaded patterns — see `shader.ts` and `patterns.ts`.
+ *
+ * Each names its inks here, per tone, as six custom properties the shader reads back as the
+ * browser resolves them: the ground first, then the pattern's own. They are opaque — a shader
+ * cannot see through to the band — so a translucent role is mixed onto its ground here, where the
+ * stylesheet can do it, rather than in the shader. The strength is how loudly the pattern is
+ * painted on that ground, and the grain how much tooth it is given: least on the light ground,
+ * where grain reads as dirt, most on the dark, where it reads as film.
+ */
+:where([data-dds-context="marketing"]) .dds-background {
+  --dds-background-gl-strength: 1;
+  --dds-background-gl-grain: 0.035;
+  --dds-background-gl-hairline: var(--border-width-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='dark'] {
+  --dds-background-gl-grain: 0.05;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] {
+  --dds-background-gl-grain: 0.025;
+}
+
+/*
+ * The aurora and the mesh take none. They are drawn at half the density and scaled up, so the grain
+ * was scaled up with them: at the hairline patterns' amount it read as noise laid over the light,
+ * and at less it showed the lattice of the pixels it was drawn on. The browser's own smoothing as it
+ * scales them up is what keeps their long fades from banding.
+ */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='aurora'], [data-pattern='mesh']) {
+  --dds-background-gl-grain: 0;
+}
+
+/* The aurora: curtains lighter than the ground they rise from, with a deeper red folded through. */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='brand'] {
+  /* On the coral the curtains are the brand's own deeper reds — its hover and its pressed red —
+     with only a touch of light at their brightest, so the band stays coral. White curtains washed
+     the coral to pink. */
+  --dds-background-gl-ink0: var(--color-bg-brand);
+  --dds-background-gl-ink1: var(--color-bg-brand-active);
+  --dds-background-gl-ink2: var(--color-bg-brand-hover);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 72%, var(--color-fg-on-brand));
+  --dds-background-gl-strength: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='dark'] {
+  --dds-background-gl-ink0: var(--color-bg-brand-strong);
+  --dds-background-gl-ink1: var(--color-bg-brand);
+  --dds-background-gl-ink2: var(--color-bg-brand-active);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 60%, var(--color-fg-on-brand-strong));
+  --dds-background-gl-strength: 0.85;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='light'] {
+  --dds-background-gl-ink0: var(--color-bg-page);
+  --dds-background-gl-ink1: var(--color-bg-brand);
+  --dds-background-gl-ink2: var(--color-bg-brand-hover);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 50%, var(--color-bg-page));
+  --dds-background-gl-strength: 0.35;
+}
+
+/*
+ * The mesh: the front page's five pools, in the same inks as the stylesheet's version of them —
+ * the deepest red, the pressed red, the hover, the pressed red again, and the coral — on each
+ * ground. The strength is that version's too: full on the coral, a glow on the dark, a blush on
+ * the light. How far the deepest is held back is its `--dds-background-mesh-shade`.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='brand'] {
+  --dds-background-gl-ink0: var(--color-bg-brand);
+  --dds-background-gl-ink1: var(--color-bg-brand-deep);
+  --dds-background-gl-ink2: var(--color-bg-brand-active);
+  --dds-background-gl-ink3: var(--color-bg-brand-hover);
+  --dds-background-gl-ink4: var(--color-bg-brand-active);
+  --dds-background-gl-ink5: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='dark'] {
+  --dds-background-gl-ink0: var(--color-bg-brand-strong);
+  --dds-background-gl-ink1: var(--color-bg-brand);
+  --dds-background-gl-ink2: var(--color-bg-brand-active);
+  --dds-background-gl-ink3: var(--color-bg-brand-hover);
+  --dds-background-gl-ink4: var(--color-bg-brand-active);
+  --dds-background-gl-ink5: var(--color-bg-brand);
+  /* Less than the stylesheet's 0.6: its pools are smaller than the band, and these reach every
+     corner of it, so at that strength the near-black ground was gone. */
+  --dds-background-gl-strength: 0.35;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='light'] {
+  --dds-background-gl-ink0: var(--color-bg-page);
+  --dds-background-gl-ink1: var(--color-bg-brand-subtle);
+  --dds-background-gl-ink2: var(--color-bg-brand);
+  --dds-background-gl-ink3: var(--color-bg-brand-subtle);
+  --dds-background-gl-ink4: var(--color-bg-brand-hover);
+  --dds-background-gl-ink5: var(--color-bg-brand-subtle);
+  --dds-background-gl-strength: 0.22;
+}
+
+/* The grid and the rings: the ground, the resting rule, the lit rule, and the bloom at the foot. */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='grid'] {
+  --dds-background-gl-pitch: var(--size-rule-grid-pitch);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='rings'] {
+  --dds-background-gl-pitch: var(--size-rings-pitch);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']) {
+  --dds-background-gl-hairline: var(--dds-background-hairline);
+}
+
+/* On the coral, the brand's own reds: the bloom the lines rise out of is its pressed red, a deeper
+   coral rather than a whitened one, and the rules a faint lighter coral — white blooms and white
+   rules washed the band to pink. The lit lines and the travelling light keep most of the white,
+   since they are the one thing on the band meant to catch the eye. */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='brand'] {
+  --dds-background-gl-ink0: var(--color-bg-brand);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-fg-on-brand) 22%, var(--color-bg-brand));
+  --dds-background-gl-ink2: color-mix(in srgb, var(--color-fg-on-brand) 70%, var(--color-bg-brand));
+  --dds-background-gl-ink3: var(--color-bg-brand-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='dark'] {
+  --dds-background-gl-ink0: var(--color-bg-brand-strong);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-fg-on-brand-strong) 16%, var(--color-bg-brand-strong));
+  --dds-background-gl-ink2: var(--color-bg-brand);
+  --dds-background-gl-ink3: var(--color-bg-brand-deep);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light'] {
+  --dds-background-gl-ink0: var(--color-bg-page);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-bg-brand) 28%, var(--color-bg-page));
+  --dds-background-gl-ink2: var(--color-bg-brand);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 12%, var(--color-bg-page));
+}
+
+/*
+ * The shader's canvas is opaque, so until it has a frame it stays out of sight and the stylesheet's
+ * version shows. Once it has — `data-shaded` — the stylesheet's paint steps aside: the grid's and
+ * the rings' background images, every pattern's pseudo-elements, and the mesh's pools.
+ */
+:where([data-dds-context="marketing"]) .dds-background:not([data-pattern='halftone']):not([data-shaded='true']) .dds-background__canvas {
+  visibility: hidden;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true'] {
+  background-image: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true']::before,
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true']::after {
+  display: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true'] .dds-background__mesh {
+  display: none;
+}

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

@@ -89,6 +89,17 @@ export interface HalftoneTuning {
     ceiling: number;
     /** How sharply the glow falls off — higher is a tighter, harder-edged glow. */
     falloff: number;
+    /**
+     * How far the glow's edge wanders from a smooth ellipse, from 0 to 1. A slow field of waves warps
+     * the distance each dot is lit by, so the pool of light has lobes and inlets that drift as it
+     * moves — light on a surface rather than a spotlight. 0 is the plain ellipse.
+     */
+    texture: number;
+    /**
+     * How strong a soft wash of the dots' own ink is under the glow, from 0 to 1 — the light the dots
+     * are lit by, as well as the dots. It follows the glow and takes its shape. 0 draws dots alone.
+     */
+    bloom: number;
     /** Where the glow rests, as a share of the band's width. */
     restX: number;
     /** Where the glow rests, as a share of the band's height. */

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

@@ -61,6 +61,11 @@ const SETTINGS = {
     // 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,
+    // A third of the way from a plain ellipse: enough that the glow's edge reads as uneven light,
+    // not so much that the pool breaks into islands.
+    texture: 0.35,
+    // A faint wash under the glow, so the dots read as lit rather than as printed on a flat ground.
+    bloom: 0.18,
     // Centred, on the band's foot, so the light rises from the bottom edge under the words.
     restX: 0.5,
     restY: 0.97,
@@ -198,6 +203,9 @@ export function halftone(root, canvas, options) {
     let tuning = { ...fromTokens, ...SETTINGS, ...overrides };
     // One colour per brightness step, from the base at the faintest to the active at the brightest.
     let fills = [];
+    // The bloom's ink: the dots' base, at the strength the bloom is drawn at, and clear.
+    let bloomFrom = 'transparent';
+    let bloomTo = 'transparent';
     function settle() {
         tuning = { ...fromTokens, ...SETTINGS, ...overrides };
         resolved = tuning;
@@ -212,6 +220,9 @@ export function halftone(root, canvas, options) {
             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})`;
         });
+        const glow = Math.max(0, Math.min(1, tuning.bloom)) * Math.max(0, Math.min(1, tuning.opacity)) * from[3];
+        bloomFrom = `rgba(${from[0]}, ${from[1]}, ${from[2]}, ${glow})`;
+        bloomTo = `rgba(${from[0]}, ${from[1]}, ${from[2]}, 0)`;
     }
     let width = 0;
     let height = 0;
@@ -313,8 +324,27 @@ export function halftone(root, canvas, options) {
         // 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.
+        // The bloom: one radial wash under the glow, stretched to the glow's own ellipse.
+        if (tuning.bloom > 0) {
+            context.save();
+            context.translate(glowX, glowY);
+            context.scale(1, reachY / reachX);
+            const wash = context.createRadialGradient(0, 0, 0, 0, 0, reachX);
+            wash.addColorStop(0, bloomFrom);
+            wash.addColorStop(1, bloomTo);
+            context.fillStyle = wash;
+            context.fillRect(-reachX, -reachX, reachX * 2, reachX * 2);
+            context.restore();
+        }
         const sizeFloor = Math.max(0, Math.min(1, tuning.sizeFloor));
         const farthest = widest * sizeFloor >= SMALLEST ? Infinity : Math.log(widest / SMALLEST) / falloff;
+        // The glow's texture: a slow field of three waves at periods that do not divide into each other,
+        // warping each dot's distance from the glow. It moves only while the glow drifts, so a band
+        // asked to hold still keeps one shape. The most it can bring a dot closer is `slack`, which the
+        // skip tests allow for so no dot the warp would light is passed over.
+        const texture = Math.max(0, Math.min(1, tuning.texture));
+        const time = drifts() ? performance.now() / 1000 : 0;
+        const slack = 1 - Math.min(0.9, texture * 1.6);
         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
@@ -338,12 +368,22 @@ export function halftone(root, canvas, options) {
             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)
+            if (dy2 * slack > farthest)
                 continue;
             const rowAt = row * columns;
+            const v = homeRowY / height;
+            const rowWave = Math.sin(v * 5.3 - time * 0.27);
             for (let column = 0; column < columns; column += 1) {
-                const dx = (startX + column * pitch - glowX) / reachX;
-                const d2 = dx * dx + dy2;
+                const homeColumnX = startX + column * pitch;
+                const dx = (homeColumnX - glowX) / reachX;
+                const plain = dx * dx + dy2;
+                if (plain * slack > farthest)
+                    continue;
+                const u = homeColumnX / width;
+                const warp = texture === 0
+                    ? 0
+                    : texture * (Math.sin(u * 7.1 + time * 0.35) * rowWave + 0.6 * Math.sin((u + v) * 11.7 - time * 0.5));
+                const d2 = plain * (1 + warp);
                 if (d2 > farthest)
                     continue;
                 const light = Math.exp(-d2 * falloff);

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

@@ -0,0 +1,66 @@
+/**
+ * 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 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 declare const AURORA = "\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // \u2014 measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  vec2 p = vec2(field.x, uv.y);\n  float t = u_time * 0.06;\n\n  vec2 toward = vec2(field.x - lamp0.x, uv.y - u_pointer.y);\n  float near = exp(-dot(toward, toward) * 5.0) * u_hover;\n\n  float sway = fbm(vec2(p.x * 0.8 + t, t * 0.7)) - 0.5;\n  float x = p.x * 1.5 + sway * 1.6 - toward.x * near * 0.8;\n\n  float folds = fbm(vec2(x * 2.2, p.y * 0.35 - t * 1.6));\n  float curtain = smoothstep(0.3, 0.72, folds);\n  float rays = 0.6 + 0.4 * noise(vec2(x * 26.0, p.y * 1.4 - t * 3.0));\n\n  float crest = 0.08 + 0.38 * fbm(vec2(x * 1.2 + 4.0, t * 0.8));\n  float rise = smoothstep(crest, 0.82, uv.y);\n  float base = smoothstep(0.55, 1.0, uv.y);\n\n  float light = (curtain * rays * rise + base * 0.3 + near * 0.45) * u_strength;\n\n  vec3 tint = mix(u_ink1, u_ink2, smoothstep(0.3, 0.8, fbm(vec2(x * 1.1 - 3.0, p.y * 0.8 + t))));\n  tint = mix(tint, u_ink3, pow(clamp(curtain * rise, 0.0, 1.0), 2.5) * 0.65);\n\n  vec3 colour = mix(u_ink0, tint, clamp(light, 0.0, 1.0));\n  gl_FragColor = vec4(grain(colour, gl_FragCoord.xy), 1.0);\n}\n";
+/**
+ * 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 declare const MESH = "\n// One pool: where it rests, in shares of the band; how big, in shares of its longer side; how far it leans after the\n// pointer; and its loops \u2014 the drift and the stretch \u2014 in seconds, offset by a phase of its own.\nfloat pool(vec2 px, vec2 at, float size, float depth, float drift, float morph, float phase) {\n  // Sized by the band's longer side rather than its width: on a phone the band is tall and narrow,\n  // and pools sized by its width came out small \u2014 the deepest a hard, dark blot in one corner and\n  // the rest of the band flat. Measured against the longer side they cover a tall band as they do\n  // a wide one.\n  float w = max(u_size.x, u_size.y);\n  float t = u_time;\n  float tau = 6.2831853;\n\n  // The drift: a slow wander and a swell, there and back.\n  vec2 wander = vec2(\n    0.10 * sin(tau * t / drift + phase),\n    0.08 * sin(tau * t / (drift * 1.3) + phase * 1.7)\n  ) * size * w;\n  float swell = 1.0 + 0.1 * sin(tau * t / (drift * 0.8) + phase * 0.6);\n\n  // Leaning after the pointer by its depth, a hundredth of the pool per step, as the front page's do.\n  vec2 lean = (u_pointer - 0.5) * 2.0 * u_hover * depth * 0.01 * size * w;\n\n  vec2 centre = at * u_size + wander + lean;\n  vec2 d = px - centre;\n\n  // The stretch: one way then the other, turning as it goes.\n  float turn = 1.4 * sin(tau * t / (morph * 2.0) + phase);\n  float c = cos(turn);\n  float s = sin(turn);\n  d = mat2(c, -s, s, c) * d;\n  float stretch = sin(tau * t / morph + phase);\n  d /= vec2(1.0 + 0.18 * stretch, 1.0 - 0.15 * stretch);\n\n  // An uneven round, its outline wobbling as it turns.\n  float angle = atan(d.y, d.x);\n  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));\n  float r = length(d) / radius;\n  // Soft all the way out: a blur's falloff rather than an edge.\n  return exp(-r * r * 1.1);\n}\n\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // \u2014 measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  vec3 c = u_ink0;\n  // The deepest red, off the near side low down \u2014 a shade under the words, held back.\n  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);\n  // The pressed red, high in the far corner, the largest.\n  c = mix(c, u_ink2, pool(px, vec2(0.92, -0.08), 0.85, 10.0, 31.0, 9.0, 1.7) * u_strength);\n  // The hover red, through the middle.\n  c = mix(c, u_ink3, pool(px, vec2(0.6, 0.5), 0.62, 16.0, 22.0, 7.0, 3.1) * u_strength);\n  // The pressed red again, swelling up from the foot.\n  c = mix(c, u_ink4, pool(px, vec2(0.5, 1.1), 0.75, -12.0, 35.0, 12.0, 4.4) * u_strength);\n  // The coral itself, high in the far corner: the brightest the pools go.\n  c = mix(c, u_ink5, pool(px, vec2(0.74, 0.06), 0.42, 20.0, 28.0, 8.0, 5.9) * u_strength);\n\n  // A little more colour, as the front page's blur saturates its pools.\n  float grey = dot(c, vec3(0.299, 0.587, 0.114));\n  c = mix(vec3(grey), c, 1.15);\n\n  gl_FragColor = vec4(grain(clamp(c, 0.0, 1.0), gl_FragCoord.xy), 1.0);\n}\n";
+/**
+ * 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 declare const GRID = "\n\nfloat hairline(float distance) {\n  float halfWidth = u_hairline * 0.5;\n  float pixel = 1.0 / u_scale;\n  return 1.0 - smoothstep(halfWidth, halfWidth + pixel, distance);\n}\n\n// A soft bloom at the middle of the band's foot \u2014 where the halftone's glow rests \u2014 so the lines\n// rise out of light rather than out of a flat ground.\nfloat bloom(vec2 uv) {\n  vec2 d = vec2((uv.x - 0.5) * 1.5, (1.0 - uv.y) * 2.2);\n  return exp(-dot(d, d));\n}\n\n// The pointer's light, a soft circle a pitch and a half across.\nfloat lamp(vec2 px) {\n  vec2 d = px - u_pointer * u_size;\n  float reach = u_pitch * 1.6;\n  return exp(-dot(d, d) / (reach * reach)) * u_hover;\n}\n\n// A short bright dash running along a line, at a place along it, fading off behind.\nfloat dash(float along) {\n  return smoothstep(0.0, 0.06, along) * (1.0 - smoothstep(0.06, 0.3, along));\n}\n\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // \u2014 measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  float pitch = u_pitch;\n  float shift = mod(u_time / 10.0, 1.0) * pitch;\n  vec2 g = vec2(px.x - u_size.x * 0.5 + pitch * 0.5, px.y + shift);\n  vec2 d = abs(fract(g / pitch) - 0.5) * pitch;\n  vec2 lines = vec2(hairline(pitch * 0.5 - d.x), hairline(pitch * 0.5 - d.y));\n  float line = max(lines.x, lines.y);\n  float meet = lines.x * lines.y;\n\n  vec2 cell = floor(g / pitch);\n  float upward = fract(px.y / (pitch * 7.0) + u_time * 0.07 + hash(vec2(cell.x, 3.1)));\n  float across = fract(px.x / (pitch * 9.0) - u_time * 0.05 + hash(vec2(cell.y, 7.7)));\n  float pulses =\n    lines.x * dash(upward) * step(0.7, hash(vec2(cell.x, 9.7))) +\n    lines.y * dash(across) * step(0.78, hash(vec2(cell.y, 4.2)));\n\n  float fade = smoothstep(0.0, 1.0, uv.y);\n  float glow = bloom(uv);\n  float lit = lamp(px);\n\n  vec3 c = mix(u_ink0, u_ink3, glow * 0.45 * u_strength);\n  c = mix(c, u_ink1, line * fade * (0.55 + 0.45 * glow) * u_strength);\n  c = mix(c, u_ink2, clamp(pulses * fade + line * lit + meet * fade * 0.35, 0.0, 1.0) * u_strength);\n\n  gl_FragColor = vec4(grain(c, gl_FragCoord.xy), 1.0);\n}\n";
+/**
+ * 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 declare const RINGS = "\n\nfloat hairline(float distance) {\n  float halfWidth = u_hairline * 0.5;\n  float pixel = 1.0 / u_scale;\n  return 1.0 - smoothstep(halfWidth, halfWidth + pixel, distance);\n}\n\n// A soft bloom at the middle of the band's foot \u2014 where the halftone's glow rests \u2014 so the lines\n// rise out of light rather than out of a flat ground.\nfloat bloom(vec2 uv) {\n  vec2 d = vec2((uv.x - 0.5) * 1.5, (1.0 - uv.y) * 2.2);\n  return exp(-dot(d, d));\n}\n\n// The pointer's light, a soft circle a pitch and a half across.\nfloat lamp(vec2 px) {\n  vec2 d = px - u_pointer * u_size;\n  float reach = u_pitch * 1.6;\n  return exp(-dot(d, d) / (reach * reach)) * u_hover;\n}\n\n// A short bright dash running along a line, at a place along it, fading off behind.\nfloat dash(float along) {\n  return smoothstep(0.0, 0.06, along) * (1.0 - smoothstep(0.06, 0.3, along));\n}\n\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // \u2014 measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  float pitch = u_pitch;\n  vec2 centre = vec2(u_size.x * 0.5, u_size.y);\n  vec2 from = px - centre;\n  float radius = length(from);\n  float shift = mod(u_time / 10.0, 1.0) * pitch;\n  float place = (radius - shift) / pitch;\n  float d = abs(fract(place) - 0.5) * pitch;\n  float line = hairline(pitch * 0.5 - d);\n\n  float ring = floor(place);\n  float angle = atan(from.x, -from.y);\n  float turn = (hash(vec2(ring, 1.7)) > 0.5 ? 1.0 : -1.0) * (0.15 + 0.25 * hash(vec2(ring, 5.3)));\n  float arc = noise(vec2(angle * 3.0 + u_time * turn, ring * 3.1));\n  float sparkle = line * smoothstep(0.62, 0.9, arc);\n\n  float fade = smoothstep(0.0, 1.0, uv.y);\n  float glow = bloom(uv);\n  float lit = lamp(px);\n\n  vec3 c = mix(u_ink0, u_ink3, glow * 0.45 * u_strength);\n  c = mix(c, u_ink1, line * fade * (0.55 + 0.45 * glow) * u_strength);\n  c = mix(c, u_ink2, clamp(sparkle * fade + line * lit, 0.0, 1.0) * u_strength);\n\n  gl_FragColor = vec4(grain(c, gl_FragCoord.xy), 1.0);\n}\n";
+/** Each pattern's shader and the highest density it draws at: soft fields need little, hairlines two. */
+export declare const SHADERS: {
+    readonly aurora: {
+        readonly fragment: "\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // — measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  vec2 p = vec2(field.x, uv.y);\n  float t = u_time * 0.06;\n\n  vec2 toward = vec2(field.x - lamp0.x, uv.y - u_pointer.y);\n  float near = exp(-dot(toward, toward) * 5.0) * u_hover;\n\n  float sway = fbm(vec2(p.x * 0.8 + t, t * 0.7)) - 0.5;\n  float x = p.x * 1.5 + sway * 1.6 - toward.x * near * 0.8;\n\n  float folds = fbm(vec2(x * 2.2, p.y * 0.35 - t * 1.6));\n  float curtain = smoothstep(0.3, 0.72, folds);\n  float rays = 0.6 + 0.4 * noise(vec2(x * 26.0, p.y * 1.4 - t * 3.0));\n\n  float crest = 0.08 + 0.38 * fbm(vec2(x * 1.2 + 4.0, t * 0.8));\n  float rise = smoothstep(crest, 0.82, uv.y);\n  float base = smoothstep(0.55, 1.0, uv.y);\n\n  float light = (curtain * rays * rise + base * 0.3 + near * 0.45) * u_strength;\n\n  vec3 tint = mix(u_ink1, u_ink2, smoothstep(0.3, 0.8, fbm(vec2(x * 1.1 - 3.0, p.y * 0.8 + t))));\n  tint = mix(tint, u_ink3, pow(clamp(curtain * rise, 0.0, 1.0), 2.5) * 0.65);\n\n  vec3 colour = mix(u_ink0, tint, clamp(light, 0.0, 1.0));\n  gl_FragColor = vec4(grain(colour, gl_FragCoord.xy), 1.0);\n}\n";
+        readonly density: 0.5;
+    };
+    readonly mesh: {
+        readonly fragment: "\n// One pool: where it rests, in shares of the band; how big, in shares of its longer side; how far it leans after the\n// pointer; and its loops — the drift and the stretch — in seconds, offset by a phase of its own.\nfloat pool(vec2 px, vec2 at, float size, float depth, float drift, float morph, float phase) {\n  // Sized by the band's longer side rather than its width: on a phone the band is tall and narrow,\n  // and pools sized by its width came out small — the deepest a hard, dark blot in one corner and\n  // the rest of the band flat. Measured against the longer side they cover a tall band as they do\n  // a wide one.\n  float w = max(u_size.x, u_size.y);\n  float t = u_time;\n  float tau = 6.2831853;\n\n  // The drift: a slow wander and a swell, there and back.\n  vec2 wander = vec2(\n    0.10 * sin(tau * t / drift + phase),\n    0.08 * sin(tau * t / (drift * 1.3) + phase * 1.7)\n  ) * size * w;\n  float swell = 1.0 + 0.1 * sin(tau * t / (drift * 0.8) + phase * 0.6);\n\n  // Leaning after the pointer by its depth, a hundredth of the pool per step, as the front page's do.\n  vec2 lean = (u_pointer - 0.5) * 2.0 * u_hover * depth * 0.01 * size * w;\n\n  vec2 centre = at * u_size + wander + lean;\n  vec2 d = px - centre;\n\n  // The stretch: one way then the other, turning as it goes.\n  float turn = 1.4 * sin(tau * t / (morph * 2.0) + phase);\n  float c = cos(turn);\n  float s = sin(turn);\n  d = mat2(c, -s, s, c) * d;\n  float stretch = sin(tau * t / morph + phase);\n  d /= vec2(1.0 + 0.18 * stretch, 1.0 - 0.15 * stretch);\n\n  // An uneven round, its outline wobbling as it turns.\n  float angle = atan(d.y, d.x);\n  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));\n  float r = length(d) / radius;\n  // Soft all the way out: a blur's falloff rather than an edge.\n  return exp(-r * r * 1.1);\n}\n\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // — measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  vec3 c = u_ink0;\n  // The deepest red, off the near side low down — a shade under the words, held back.\n  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);\n  // The pressed red, high in the far corner, the largest.\n  c = mix(c, u_ink2, pool(px, vec2(0.92, -0.08), 0.85, 10.0, 31.0, 9.0, 1.7) * u_strength);\n  // The hover red, through the middle.\n  c = mix(c, u_ink3, pool(px, vec2(0.6, 0.5), 0.62, 16.0, 22.0, 7.0, 3.1) * u_strength);\n  // The pressed red again, swelling up from the foot.\n  c = mix(c, u_ink4, pool(px, vec2(0.5, 1.1), 0.75, -12.0, 35.0, 12.0, 4.4) * u_strength);\n  // The coral itself, high in the far corner: the brightest the pools go.\n  c = mix(c, u_ink5, pool(px, vec2(0.74, 0.06), 0.42, 20.0, 28.0, 8.0, 5.9) * u_strength);\n\n  // A little more colour, as the front page's blur saturates its pools.\n  float grey = dot(c, vec3(0.299, 0.587, 0.114));\n  c = mix(vec3(grey), c, 1.15);\n\n  gl_FragColor = vec4(grain(clamp(c, 0.0, 1.0), gl_FragCoord.xy), 1.0);\n}\n";
+        readonly density: 0.5;
+    };
+    readonly grid: {
+        readonly fragment: "\n\nfloat hairline(float distance) {\n  float halfWidth = u_hairline * 0.5;\n  float pixel = 1.0 / u_scale;\n  return 1.0 - smoothstep(halfWidth, halfWidth + pixel, distance);\n}\n\n// A soft bloom at the middle of the band's foot — where the halftone's glow rests — so the lines\n// rise out of light rather than out of a flat ground.\nfloat bloom(vec2 uv) {\n  vec2 d = vec2((uv.x - 0.5) * 1.5, (1.0 - uv.y) * 2.2);\n  return exp(-dot(d, d));\n}\n\n// The pointer's light, a soft circle a pitch and a half across.\nfloat lamp(vec2 px) {\n  vec2 d = px - u_pointer * u_size;\n  float reach = u_pitch * 1.6;\n  return exp(-dot(d, d) / (reach * reach)) * u_hover;\n}\n\n// A short bright dash running along a line, at a place along it, fading off behind.\nfloat dash(float along) {\n  return smoothstep(0.0, 0.06, along) * (1.0 - smoothstep(0.06, 0.3, along));\n}\n\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // — measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  float pitch = u_pitch;\n  float shift = mod(u_time / 10.0, 1.0) * pitch;\n  vec2 g = vec2(px.x - u_size.x * 0.5 + pitch * 0.5, px.y + shift);\n  vec2 d = abs(fract(g / pitch) - 0.5) * pitch;\n  vec2 lines = vec2(hairline(pitch * 0.5 - d.x), hairline(pitch * 0.5 - d.y));\n  float line = max(lines.x, lines.y);\n  float meet = lines.x * lines.y;\n\n  vec2 cell = floor(g / pitch);\n  float upward = fract(px.y / (pitch * 7.0) + u_time * 0.07 + hash(vec2(cell.x, 3.1)));\n  float across = fract(px.x / (pitch * 9.0) - u_time * 0.05 + hash(vec2(cell.y, 7.7)));\n  float pulses =\n    lines.x * dash(upward) * step(0.7, hash(vec2(cell.x, 9.7))) +\n    lines.y * dash(across) * step(0.78, hash(vec2(cell.y, 4.2)));\n\n  float fade = smoothstep(0.0, 1.0, uv.y);\n  float glow = bloom(uv);\n  float lit = lamp(px);\n\n  vec3 c = mix(u_ink0, u_ink3, glow * 0.45 * u_strength);\n  c = mix(c, u_ink1, line * fade * (0.55 + 0.45 * glow) * u_strength);\n  c = mix(c, u_ink2, clamp(pulses * fade + line * lit + meet * fade * 0.35, 0.0, 1.0) * u_strength);\n\n  gl_FragColor = vec4(grain(c, gl_FragCoord.xy), 1.0);\n}\n";
+        readonly density: 2;
+    };
+    readonly rings: {
+        readonly fragment: "\n\nfloat hairline(float distance) {\n  float halfWidth = u_hairline * 0.5;\n  float pixel = 1.0 / u_scale;\n  return 1.0 - smoothstep(halfWidth, halfWidth + pixel, distance);\n}\n\n// A soft bloom at the middle of the band's foot — where the halftone's glow rests — so the lines\n// rise out of light rather than out of a flat ground.\nfloat bloom(vec2 uv) {\n  vec2 d = vec2((uv.x - 0.5) * 1.5, (1.0 - uv.y) * 2.2);\n  return exp(-dot(d, d));\n}\n\n// The pointer's light, a soft circle a pitch and a half across.\nfloat lamp(vec2 px) {\n  vec2 d = px - u_pointer * u_size;\n  float reach = u_pitch * 1.6;\n  return exp(-dot(d, d) / (reach * reach)) * u_hover;\n}\n\n// A short bright dash running along a line, at a place along it, fading off behind.\nfloat dash(float along) {\n  return smoothstep(0.0, 0.06, along) * (1.0 - smoothstep(0.06, 0.3, along));\n}\n\nvoid main() {\n  \n  vec2 frag = gl_FragCoord.xy / u_scale;\n  vec2 px = vec2(frag.x, u_size.y - frag.y);\n  vec2 uv = px / u_size;\n  float aspect = u_size.x / u_size.y;\n  // The field's own scale, in CSS pixels, so a narrow band and a wide one show folds of a like size\n  // — measured against the band's proportions, a phone-width band got one fold stretched tall. It\n  // grows a little with the band, so a full-width hero is not a field of small eddies.\n  vec2 field = px / (280.0 + 0.25 * max(u_size.x, u_size.y));\n  vec2 lamp0 = u_pointer * u_size / (280.0 + 0.25 * max(u_size.x, u_size.y));\n\n  float pitch = u_pitch;\n  vec2 centre = vec2(u_size.x * 0.5, u_size.y);\n  vec2 from = px - centre;\n  float radius = length(from);\n  float shift = mod(u_time / 10.0, 1.0) * pitch;\n  float place = (radius - shift) / pitch;\n  float d = abs(fract(place) - 0.5) * pitch;\n  float line = hairline(pitch * 0.5 - d);\n\n  float ring = floor(place);\n  float angle = atan(from.x, -from.y);\n  float turn = (hash(vec2(ring, 1.7)) > 0.5 ? 1.0 : -1.0) * (0.15 + 0.25 * hash(vec2(ring, 5.3)));\n  float arc = noise(vec2(angle * 3.0 + u_time * turn, ring * 3.1));\n  float sparkle = line * smoothstep(0.62, 0.9, arc);\n\n  float fade = smoothstep(0.0, 1.0, uv.y);\n  float glow = bloom(uv);\n  float lit = lamp(px);\n\n  vec3 c = mix(u_ink0, u_ink3, glow * 0.45 * u_strength);\n  c = mix(c, u_ink1, line * fade * (0.55 + 0.45 * glow) * u_strength);\n  c = mix(c, u_ink2, clamp(sparkle * fade + line * lit, 0.0, 1.0) * u_strength);\n\n  gl_FragColor = vec4(grain(c, gl_FragCoord.xy), 1.0);\n}\n";
+        readonly density: 2;
+    };
+};
+export type ShadedPattern = keyof typeof SHADERS;