rift-ds 1.0.0

package/components/SelectionCard/SelectionCard.css

@@ -0,0 +1,255 @@
+/* ============================================
+   SELECTION CARD COMPONENT
+   Large selectable option cards with radio or
+   checkbox indicators. Used for high-visibility
+   choice interfaces like settings and onboarding.
+   ============================================ */
+
+/* ============================================
+   GROUP — vertical stack of cards
+   ============================================ */
+
+.ds-selection-card-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+}
+
+/* ============================================
+   CARD — single option
+   ============================================ */
+
+.ds-selection-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-500); /* 20px */
+  padding: var(--padding-400); /* 16px */
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.ds-selection-card:not(.ds-selection-card--disabled):hover {
+  border-color: var(--color-action-primary-border);
+}
+
+/* ============================================
+   SELECTED STATE
+   ============================================ */
+
+.ds-selection-card--selected {
+  border-color: var(--color-action-primary-border);
+  background-color: var(--color-bg-container-primary-semi);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-selection-card--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS STATE
+   ============================================ */
+
+.ds-selection-card:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   CONTENT — label + description
+   ============================================ */
+
+.ds-selection-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 4px */
+  min-width: 0;
+}
+
+.ds-selection-card__label {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-selection-card__description {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   INDICATOR — radio, checkbox, or toggle
+   ============================================ */
+
+.ds-selection-card__indicator {
+  flex-shrink: 0;
+}
+
+/* ============================================
+   RADIO INDICATOR
+   ============================================ */
+
+.ds-selection-card__radio {
+  width: 24px;
+  height: 24px;
+  border: var(--border-050) solid var(--color-bg-container-border);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-selection-card__radio-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-action-primary-bg);
+  transform: scale(0);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Selected radio */
+.ds-selection-card--selected .ds-selection-card__radio {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-selection-card--selected .ds-selection-card__radio-dot {
+  transform: scale(1);
+}
+
+/* Hover radio (unselected) */
+.ds-selection-card:not(.ds-selection-card--disabled):not(.ds-selection-card--selected):hover .ds-selection-card__radio {
+  border-color: var(--color-action-primary-bg);
+}
+
+/* Hover radio (selected) */
+.ds-selection-card--selected:not(.ds-selection-card--disabled):hover .ds-selection-card__radio {
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-selection-card--selected:not(.ds-selection-card--disabled):hover .ds-selection-card__radio-dot {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   CHECKBOX INDICATOR
+   ============================================ */
+
+.ds-selection-card__checkbox {
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  border: var(--border-050) solid var(--color-bg-container-border);
+  border-radius: var(--radius-200); /* 8px */
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-selection-card__check-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-action-primary-text-active);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Selected checkbox */
+.ds-selection-card--selected .ds-selection-card__checkbox {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-selection-card--selected .ds-selection-card__check-icon {
+  opacity: 1;
+}
+
+/* Hover checkbox (unselected) */
+.ds-selection-card:not(.ds-selection-card--disabled):not(.ds-selection-card--selected):hover .ds-selection-card__checkbox {
+  border-color: var(--color-action-primary-bg);
+}
+
+/* Hover checkbox (selected) */
+.ds-selection-card--selected:not(.ds-selection-card--disabled):hover .ds-selection-card__checkbox {
+  background-color: var(--color-action-primary-bg-hover);
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   TOGGLE INDICATOR
+   Matches ToggleSwitch component styling
+   ============================================ */
+
+.ds-selection-card__toggle {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: var(--radius-pill);
+  background: var(--color-action-primary-bg);
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+  flex-shrink: 0;
+}
+
+.ds-selection-card__toggle-thumb {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 20px;
+  height: 20px;
+  background: var(--color-control-thumb);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-selection-card__toggle-icon {
+  /* Intentionally off the --icon-size-* scale — same reason as ToggleSwitch:
+     this glyph lives inside the 20x20 toggle thumb, and the smallest scale
+     step (20px) would fill it completely. Sized via --icon-size, not
+     font-size, so the icon's box shrinks with the glyph (see ToggleSwitch).
+
+     ds-allow(icon-size): 14px glyph inside the 20px thumb — the smallest
+     scale step would fill it edge to edge. */
+  --icon-size: 14px;
+  color: var(--color-action-primary-bg);
+}
+
+/* Off state — thumb moves left, track goes grey */
+.ds-selection-card__toggle--off {
+  background: var(--color-text-secondary);
+}
+
+.ds-selection-card__toggle--off .ds-selection-card__toggle-thumb {
+  transform: translateX(-18px);
+}
+
+.ds-selection-card__toggle--off .ds-selection-card__toggle-icon {
+  color: var(--color-text-secondary);
+}

package/components/SelectionCard/SelectionCard.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export interface SelectionCardOption {
+    /** Unique value for this option */
+    value: string;
+    /** Primary label */
+    label: string;
+    /** Optional description text below the label */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+/** Props owned by SelectionCard itself — everything else falls through to the group. */
+type SelectionCardOwnProps = {
+    /** Selection mode — radio (single), checkbox (multi), or toggle (each card is an on/off switch) */
+    mode?: 'radio' | 'checkbox' | 'toggle';
+    /** Available options */
+    options: SelectionCardOption[];
+    /** Currently selected value(s) — string for radio, string[] for checkbox */
+    value?: string | string[];
+    /** Called with the next selection — a string in radio mode, an array otherwise */
+    onValueChange?: (value: string | string[]) => void;
+    /** Group name (used for aria-label on the group) */
+    name?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
+    onChange?: (value: string | string[]) => void;
+};
+export interface SelectionCardProps extends SelectionCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SelectionCardOwnProps> {
+}
+export declare const SelectionCard: React.ForwardRefExoticComponent<SelectionCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/SelectionCard/SelectionCard.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./SelectionCard.css";
+const CheckIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "ds-selection-card__check-icon",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2 7.5L5.5 11L12 3",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+const SelectionCard = React.forwardRef(
+  ({ mode = "radio", options, value, onValueChange, onChange, name, className = "", ...rest }, ref) => {
+    const baseClass = "ds-selection-card";
+    const selectedValues = Array.isArray(value) ? value : value !== void 0 ? [value] : [];
+    const isSelected = (optionValue) => selectedValues.includes(optionValue);
+    const handleSelect = (option) => {
+      if (option.disabled) return;
+      const next = mode === "radio" ? option.value : isSelected(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+      onValueChange?.(next);
+      onChange?.(next);
+    };
+    const handleKeyDown = (e, option) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        handleSelect(option);
+      }
+    };
+    const groupRole = mode === "radio" ? "radiogroup" : "group";
+    const itemRole = mode === "radio" ? "radio" : mode === "toggle" ? "switch" : "checkbox";
+    const groupClasses = [`${baseClass}-group`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: groupClasses,
+        role: groupRole,
+        "aria-label": name || rest["aria-label"],
+        children: options.map((option) => {
+          const selected = isSelected(option.value);
+          const cardClasses = [
+            baseClass,
+            selected ? `${baseClass}--selected` : "",
+            option.disabled ? `${baseClass}--disabled` : ""
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cardClasses,
+              role: itemRole,
+              "aria-checked": selected,
+              "aria-disabled": option.disabled,
+              tabIndex: option.disabled ? -1 : 0,
+              onClick: () => handleSelect(option),
+              onKeyDown: (e) => handleKeyDown(e, option),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: option.label }),
+                  option.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: option.description })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: `${baseClass}__indicator`, children: mode === "radio" ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio-dot` }) }) : mode === "toggle" ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `${baseClass}__toggle ${selected ? "" : `${baseClass}__toggle--off`}`,
+                    children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__toggle-thumb`, children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "material-symbols-rounded ds-selection-card__toggle-icon",
+                        "aria-hidden": "true",
+                        children: "check"
+                      }
+                    ) })
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__checkbox`, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    );
+  }
+);
+SelectionCard.displayName = "SelectionCard";
+export {
+  SelectionCard
+};

package/components/ShaderField/ShaderField.css

@@ -0,0 +1,24 @@
+/* ShaderField — the canvas only.
+   Placement, clipping and any fade-to-page mask belong to the positioned
+   ancestor the caller provides: where the field sits is a layout decision,
+   and baking one in would make the component unusable anywhere else. */
+
+.ds-shader-field {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  /* Scenery, never a target — a full-bleed canvas that swallowed clicks would
+     make whatever it covers unreachable. */
+  pointer-events: none;
+  /* Reveals only once a context is live and the first frame is drawn, so a
+     machine that cannot run the shader never shows an empty canvas — it stays
+     on the caller's fallback instead. */
+  opacity: 0;
+  transition: opacity var(--motion-duration-slower) var(--motion-ease-entrance);
+}
+
+.ds-shader-field[data-status='active'] {
+  opacity: 1;
+}

package/components/ShaderField/ShaderField.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+import { ShaderBlob, ShaderParams } from './useShaderField';
+export type { ShaderBlob, ShaderParams, ShaderFieldParams, ShaderFieldState, } from './useShaderField';
+export { useShaderField, DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS } from './useShaderField';
+export { BLOB_COUNT } from './field.glsl';
+/**
+ * How the renderer has resolved.
+ *
+ * `pending` is the one that matters to a caller: the context is still coming
+ * up, so neither the field nor a fallback should be painted yet — showing a
+ * fallback here and swapping it a frame later reads as two backgrounds loading
+ * in sequence.
+ */
+export type ShaderFieldStatus = 'pending' | 'active' | 'unavailable';
+/** Props owned by ShaderField itself — everything else falls through to the canvas. */
+type ShaderFieldOwnProps = {
+    /**
+     * Field parameters, merged over the shipped defaults, so passing one
+     * property changes one thing. Changing them never rebuilds the GL state.
+     */
+    params?: Partial<ShaderParams>;
+    /**
+     * The light sources. Defaults to an eight-source composition on the core
+     * accent tokens. Fewer than `BLOB_COUNT` entries is fine — unused slots park
+     * off-field; more are ignored, because the shader's uniform arrays are
+     * fixed-size.
+     */
+    blobs?: readonly ShaderBlob[];
+    /**
+     * False keeps WebGL entirely unmounted and reports `unavailable`, so the
+     * caller's fallback is the whole background. This is the kill switch: a
+     * config lever, or an A/B against the fallback.
+     */
+    enabled?: boolean;
+    /**
+     * Called whenever the renderer's status changes. Drive the fallback layer's
+     * visibility from this — the component deliberately does not own one, since
+     * what to paint instead is a design decision, not a rendering one.
+     */
+    onStatusChange?: (status: ShaderFieldStatus) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ShaderFieldProps extends ShaderFieldOwnProps, Omit<React.ComponentPropsWithoutRef<'canvas'>, keyof ShaderFieldOwnProps> {
+}
+/**
+ * ShaderField paints an ambient WebGL2 field of soft Gaussian light sources,
+ * each sampling a semantic colour token at runtime — so the whole thing
+ * re-themes with `data-theme`, and with any scoped custom-property override,
+ * without the caller wiring anything up.
+ *
+ * It is scenery, not interface: nothing about it is a signal, so its motion
+ * cannot be mistaken for feedback. Two consequences follow, and both are
+ * handled here rather than left to the caller.
+ *
+ * It honours reduced motion in JavaScript. The system's motion tokens collapse
+ * under `prefers-reduced-motion`, but that guard is CSS-only and cannot see a
+ * `requestAnimationFrame` loop; a GPU-driven surface has to check the query
+ * itself. This one renders a single static frame and never starts its loop.
+ *
+ * And it always reports how it resolved. No WebGL2, a blocked or lost GPU
+ * context, a renderer that stalls before its first frame, or `enabled={false}`
+ * all arrive at `unavailable` through `onStatusChange`, so the caller can keep
+ * a plain CSS fallback painted underneath. The canvas fills its positioned
+ * ancestor and is inert to pointer events; give that ancestor the placement,
+ * the clipping and any mask.
+ */
+export declare const ShaderField: React.ForwardRefExoticComponent<ShaderFieldProps & React.RefAttributes<HTMLCanvasElement>>;

package/components/ShaderField/ShaderField.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useRef, useMemo, useState, useEffect } from "react";
+import { DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS, useShaderField } from "./useShaderField.js";
+import "./ShaderField.css";
+const WATCHDOG_MS = 1500;
+const ShaderField = React.forwardRef(
+  ({
+    params,
+    blobs = DEFAULT_SHADER_BLOBS,
+    enabled = true,
+    onStatusChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const canvasRef = useRef(null);
+    React.useImperativeHandle(ref, () => canvasRef.current);
+    const fieldParams = useMemo(
+      () => ({ ...DEFAULT_SHADER_PARAMS, ...params, blobs }),
+      [params, blobs]
+    );
+    const { supported, active } = useShaderField(canvasRef, fieldParams, enabled);
+    const [gaveUp, setGaveUp] = useState(false);
+    useEffect(() => {
+      if (!enabled || active || !supported) return;
+      const timer = window.setTimeout(() => setGaveUp(true), WATCHDOG_MS);
+      return () => window.clearTimeout(timer);
+    }, [enabled, active, supported]);
+    const status = !enabled || !supported ? "unavailable" : active ? "active" : gaveUp ? "unavailable" : "pending";
+    const notify = useRef(onStatusChange);
+    notify.current = onStatusChange;
+    useEffect(() => {
+      notify.current?.(status);
+    }, [status]);
+    if (!enabled) return null;
+    const classes = ["ds-shader-field", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ...rest,
+        ref: canvasRef,
+        className: classes,
+        "data-status": status,
+        "aria-hidden": "true"
+      }
+    );
+  }
+);
+ShaderField.displayName = "ShaderField";
+export {
+  DEFAULT_SHADER_BLOBS,
+  DEFAULT_SHADER_PARAMS,
+  ShaderField,
+  useShaderField
+};

package/components/ShaderField/field.glsl.d.ts

@@ -0,0 +1,39 @@
+/**
+ * GLSL sources for ShaderField, the system's ambient background field.
+ *
+ * This file owns the shader and BLOB_COUNT only. The blob table and every
+ * tuneable parameter are data, passed in by the caller, so a look can be
+ * retuned without touching GLSL.
+ *
+ * The field is a sum of soft Gaussian sources. It computes the true Gaussian
+ * falloff a stack of blurred CSS discs only approximates, blends in linear
+ * space so midpoints keep their saturation, warps the field with fbm noise so
+ * it flows instead of translating rigidly, and dithers away the 8-bit banding
+ * these wide, soft ramps otherwise produce.
+ *
+ * Coordinate space is chosen to match a CSS blob layer exactly, so a fallback
+ * built from absolutely-positioned discs lines up with it: origin at the
+ * container centre (`left`/`top: 50%`), one unit = the field's reference
+ * width (discs are vw-sized, and CSS percentage margins — top included —
+ * resolve against the containing block's width). Centres are therefore
+ * constants that never need re-uploading on resize.
+ *
+ * That reference width is the container's own width until `crop` holds it
+ * back on a narrow viewport, where the field keeps more of the scale it was
+ * composed at and the viewport crops into it instead. The hook resolves it to
+ * `u_unit`, in drawing-buffer pixels, so the shader itself never has to know
+ * which of the two it is looking at.
+ *
+ * Colours arrive already converted to linear RGB (the hook does the sRGB
+ * decode once per theme change); the shader only encodes back at the end.
+ */
+/**
+ * Sizes the shader's uniform arrays, so it is a compile-time constant here
+ * rather than a length read from data. A caller may pass fewer blobs — unused
+ * slots are parked off-field — but never more; ShaderField's own default table
+ * fills it exactly, and scripts/validate-shader-background.mjs reads this
+ * number out of this file to hold the website's config to it.
+ */
+export declare const BLOB_COUNT = 8;
+export declare const vertexSource = "#version 300 es\n// Fullscreen triangle \u2014 no buffers, three vertices from gl_VertexID.\nvoid main() {\n  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}\n";
+export declare const fragmentSource = "#version 300 es\nprecision highp float;\n\nuniform vec2  u_resolution;  // drawing-buffer size in pixels\nuniform float u_unit;        // pixels per field unit (see coordinate space)\nuniform float u_time;        // field time, seconds (speed applied JS-side)\nuniform vec3  u_color[8];  // linear RGB per blob\nuniform vec4  u_blob[8];   // xy = centre, z = sigma, w = emission weight\nuniform vec4  u_motion[8]; // xy = angular speeds, zw = phases\nuniform float u_intensity;   // peak-alpha ceiling\nuniform float u_warp;        // domain-warp strength\nuniform float u_scale;       // noise frequency\nuniform float u_grain;       // film-grain strength\nuniform float u_streak;      // anisotropic stretch: 0 = blobs, 1 = light streams\nuniform vec2  u_mouse;       // pointer in field coordinates (smoothed JS-side)\nuniform float u_mvel;        // smoothed pointer speed, width units/s\nuniform float u_react;       // cursor-reactivity strength\n\nout vec4 outColor;\n\n// Integer hash \u2014 WebGL2 has real uint ops, so no fract(sin()) precision\n// lottery on mobile GPUs.\nuint ihash(uvec2 p) {\n  p = p * uvec2(73333u, 7777u) ^ (p.yx >> 3u);\n  uint h = p.x ^ (p.y * 2654435761u);\n  h ^= h >> 15u;\n  h *= 2246822519u;\n  h ^= h >> 13u;\n  return h;\n}\n\nfloat rnd(ivec2 p) {\n  return float(ihash(uvec2(p)) >> 8) * (1.0 / 16777216.0);\n}\n\nfloat vnoise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  ivec2 c = ivec2(i);\n  return mix(\n    mix(rnd(c), rnd(c + ivec2(1, 0)), u.x),\n    mix(rnd(c + ivec2(0, 1)), rnd(c + ivec2(1, 1)), u.x),\n    u.y\n  );\n}\n\n// 3 octaves; a 4th is invisible at this softness.\nfloat fbm(vec2 p) {\n  float s = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 3; i++) {\n    s += a * vnoise(p);\n    p = p * 2.02 + vec2(17.0, 9.0);\n    a *= 0.5;\n  }\n  return s;\n}\n\nvoid main() {\n  // CSS coordinate space: origin at container centre, one unit = the\n  // reference width the hook resolved, y running downward.\n  vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_unit;\n  p.y = -p.y;\n\n  // Light-stream axis: a fixed diagonal. Distances across the axis are\n  // magnified before the Gaussian, so every source stretches along it and\n  // the field reads as rays instead of discs.\n  float ca = cos(0.5);\n  float sa = sin(0.5);\n  mat2 toStreak = mat2(ca, -sa, sa, ca);\n  float squeeze = 1.0 + u_streak * 4.0;\n\n  // Domain warp: the field flows rather than drifts. The noise is sampled\n  // in the same anisotropic space, so the flow lines follow the streams.\n  float t = u_time;\n  vec2 ps = toStreak * p;\n  ps.y *= squeeze;\n  vec2 q = vec2(\n    fbm(ps * u_scale + vec2(0.0, t * 0.030)),\n    fbm(ps * u_scale + vec2(5.2, 1.3) - t * 0.024)\n  );\n  vec2 w = p + u_warp * (q - 0.5);\n\n  // Cursor wake: a smooth vortex around the pointer, amplified by speed.\n  // The displacement is built from the *unnormalised* offset so it falls to\n  // zero at the cursor itself. Normalising here (md/mr) made the direction\n  // spin through 360 degrees at full strength across the centre pixel, which\n  // rendered as a pinch \u2014 a cone converging to a point.\n  vec2 md = p - u_mouse;\n  float mr2 = dot(md, md);\n  float minf = exp(-mr2 / (2.0 * 0.22 * 0.22));\n  vec2 swirl = vec2(-md.y, md.x);\n  // smoothstep, not min(): a hard clamp stepped visibly as speed crossed it.\n  float stir = 0.25 + 1.3 * smoothstep(0.0, 0.8, u_mvel);\n  w += u_react * minf * stir * (swirl * 0.9 + md * 0.35);\n\n  // Accumulate true Gaussians in linear space. Positive weights emit;\n  // negative weights absorb (shadows \u2014 the eclipse disc).\n  vec3 acc = vec3(0.0);\n  float cov = 0.0;\n  float shade = 0.0;\n  for (int i = 0; i < 8; i++) {\n    vec2 c = u_blob[i].xy + 0.045 * vec2(\n      cos(u_motion[i].x * t + u_motion[i].z),\n      sin(u_motion[i].y * t + u_motion[i].w)\n    );\n    vec2 d = toStreak * (w - c);\n    d.y *= squeeze;\n    float s = u_blob[i].z;\n    float g = exp(-dot(d, d) / (2.0 * s * s));\n    float wgt = u_blob[i].w;\n    if (wgt >= 0.0) {\n      acc += u_color[i] * (g * wgt);\n      cov += g * wgt;\n    } else {\n      shade += g * -wgt;\n    }\n  }\n\n  // Glow trail: wider and softer than the swirl, and mostly velocity-driven,\n  // so a resting cursor does not park a bright dot on the field.\n  //\n  // The wake brightens whatever colour it is passing over rather than adding\n  // one of its own. Injecting u_color[0] meant the trail always wore the\n  // first blob's token \u2014 gold in the site palette, violet in beam \u2014 which\n  // read as a stray colour with no relationship to the field beneath it.\n  // Weighting by the local hue keeps the wake colour-neutral: it reads as\n  // light falling on the field, and it stays correct for any palette.\n  vec3 local = acc / max(cov, 1e-4);\n  float gfall = exp(-mr2 / (2.0 * 0.3 * 0.3));\n  float glow = u_react * gfall * (0.12 + 0.5 * smoothstep(0.0, 0.8, u_mvel));\n  acc += local * glow;\n  cov += glow;\n\n  vec3 lin = acc / max(cov, 1e-4);\n  float lit = max(cov - shade, 0.0);\n  float alpha = u_intensity * (1.0 - exp(-lit * 0.9));\n\n  vec3 srgb = pow(max(lin, vec3(0.0)), vec3(1.0 / 2.2));\n\n  // Film grain: animated hash noise. At u_grain 0 this degenerates to the\n  // \u00B11/255 dither that kills banding, so the two share one lookup.\n  uvec2 gp = uvec2(gl_FragCoord.xy) + uvec2(\n    uint(fract(t * 7.31) * 1024.0) * 7919u,\n    uint(fract(t * 3.17) * 1024.0) * 104729u\n  );\n  float gr = float(ihash(gp) & 255u) / 255.0 - 0.5;\n  srgb += gr * (1.0 / 255.0 + u_grain * 0.35);\n  // A small grain-driven alpha floor lets the sparkle read even where the\n  // field itself is empty (the reference's grainy dark scene).\n  float grainFloor = u_grain * 0.1 * (gr + 0.5);\n  alpha = clamp(alpha * (1.0 + gr * u_grain * 0.5) + grainFloor, 0.0, 1.0);\n  srgb = clamp(srgb, 0.0, 1.0);\n\n  // Premultiplied output (context is created with premultipliedAlpha: true).\n  outColor = vec4(srgb * alpha, alpha);\n}\n";