@deriv-com/dds-marketing 1.0.1 → 1.1.0

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;

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;