diff --git a/docs/adr/0013-site-motion-language.md b/docs/adr/0013-site-motion-language.md
new file mode 100644
index 00000000..6bf27169
--- /dev/null
+++ b/docs/adr/0013-site-motion-language.md
@@ -0,0 +1,57 @@
+# 0013 — Site motion language and the ambient gradient
+
+Date: 2026-07-02
+Status: accepted
+
+## Context
+
+The scroll-story homepage (ADR 0012) established that motion is central to
+the site's character. The owner's direction, after evaluating dark vs light
+prototypes: light pages, one continuous animated brand gradient tying
+sections together, and — borrowing Stripe's philosophy, not their pixels —
+"restraint, but nearly every element has movement."
+
+## Decision
+
+**Motion rules (site-wide):**
+
+1. Animate only `transform` and `opacity` in loops; canvas/WebGL for the two
+   signature elements (ambient gradient, dot orbit) with rAF gated by
+   IntersectionObserver and `visibilitychange`.
+2. Everything honours `prefers-reduced-motion` (static frame or no
+   animation; the homepage swaps to `StoryStatic`).
+3. Ambient loops are slow (≥9s periods); interaction feedback is fast
+   (<500ms). Nothing autoplays sound, blocks input, or shifts layout.
+4. Backgrounds may drift; **pinned foreground objects hold still**.
+5. Every section-level animation must illustrate the copy's point, not
+   decorate it (hardware carousel = "anything works"; arc pulses = sync;
+   synchronized Charge buttons = "same store, same data").
+
+**The ambient gradient** (`src/components/ui/ambient-gradient.tsx`) is an
+original ~180-line WebGL fragment shader: domain-warped value noise through
+the backdrop palette (blue-led with pink/yellow splashes — bright but calm; warm red/orange washes ruled out, brand red lives only in small accents) with a digital character: terraced contour lines and a bright filament through the noise field, not soft cloud inside a
+bottom-left→top-right diagonal band that fades to warm white where copy
+sits, with slow upward drift (echoing the homepage's coffee steam). It is
+deliberately *not* Stripe's minigl or any recreation of it — inspired-by,
+clean-room. Static CSS-gradient fallback on missing WebGL or context loss;
+single-frame render under reduced motion; DPR capped at 1.5.
+
+It is a reusable primitive: pricing/pro/downloads heroes adopt it as the
+follow-up to this ADR.
+
+## Consequences
+
+- One GPU surface per page for the signature background; everything else is
+  compositor-only CSS. Old-hardware cost stays bounded.
+- The homepage's per-act drifting patterns were removed in favour of
+  foreground act animations (rule 5).
+- A `Reveal` scroll-into-view primitive (IntersectionObserver + <500ms
+  transform/opacity) is the next building block for non-homepage pages.
+- **Interactive kit direction:** the site standardises on two libraries and
+  pushes them hard — `motion` (scroll, springs, gestures, SVG pathLength)
+  and `three` + `@react-three/fiber` (lazy-loaded, component-scale 3D
+  centerpieces such as a pointer-reactive spike burst). Custom canvas/WebGL
+  (DotOrbit, AmbientGradient) stays for cases smaller than a three scene.
+  Kit lives in `src/components/motion/`; every piece is IO/visibility gated
+  and reduced-motion aware. First deployments: downloads "how it fits
+  together" hub pulses, about-us timeline draw-on-scroll.
diff --git a/src/components/home/scroll-story/acts/dot-orbit.tsx b/src/components/home/scroll-story/acts/dot-orbit.tsx
index a3934aea..beeefcff 100644
--- a/src/components/home/scroll-story/acts/dot-orbit.tsx
+++ b/src/components/home/scroll-story/acts/dot-orbit.tsx
@@ -10,7 +10,7 @@ import * as React from 'react'
  * (static ring is drawn once instead).
  */
 
-const DOTS = 130
+const DOTS = 170
 const SIZE = 520
 const RING_RADIUS = 190
 const ATTRACT_RADIUS = 130
@@ -46,7 +46,7 @@ function makeDots(): Dot[] {
 
 const COLORS: Record<Dot['hue'], string> = {
   slate: 'rgba(100, 116, 139, 0.55)',
-  red: 'rgba(205, 32, 31, 0.5)',
+  red: 'rgba(43, 108, 176, 0.55)',
   purple: 'rgba(127, 84, 179, 0.55)',
 }
 
diff --git a/src/components/home/scroll-story/devices/laptop.tsx b/src/components/home/scroll-story/devices/laptop.tsx
index 7ec015be..c7968093 100644
--- a/src/components/home/scroll-story/devices/laptop.tsx
+++ b/src/components/home/scroll-story/devices/laptop.tsx
@@ -2,11 +2,21 @@ import { cn } from '@/lib/utils'
 import { PosScreen } from './pos-screen'
 import styles from '../story.module.css'
 
-export function DeviceLaptop({ className }: { className?: string }) {
+export function DeviceLaptop({
+  className,
+  animateCharge = true,
+}: {
+  className?: string
+  animateCharge?: boolean
+}) {
   return (
     <div aria-hidden="true" className={cn('w-[420px]', className)}>
       <div className={cn('h-[250px] rounded-t-xl p-2.5 pb-1', styles.laptopLid)}>
-        <PosScreen variant="laptop" register="Register 2" />
+        <PosScreen
+          variant="laptop"
+          register="Register 2"
+          animateCharge={animateCharge}
+        />
       </div>
       <div className={cn('-mx-6 h-3.5 rounded-b-2xl', styles.laptopBase)}>
         <div className="mx-auto h-1.5 w-24 rounded-b-md bg-slate-800" />
diff --git a/src/components/home/scroll-story/devices/phone.tsx b/src/components/home/scroll-story/devices/phone.tsx
index edac8b83..8e9ba098 100644
--- a/src/components/home/scroll-story/devices/phone.tsx
+++ b/src/components/home/scroll-story/devices/phone.tsx
@@ -2,7 +2,13 @@ import { cn } from '@/lib/utils'
 import { PosScreen } from './pos-screen'
 import styles from '../story.module.css'
 
-export function DevicePhone({ className }: { className?: string }) {
+export function DevicePhone({
+  className,
+  animateCharge = true,
+}: {
+  className?: string
+  animateCharge?: boolean
+}) {
   return (
     <div
       aria-hidden="true"
@@ -12,7 +18,7 @@ export function DevicePhone({ className }: { className?: string }) {
         className
       )}
     >
-      <PosScreen variant="phone" />
+      <PosScreen variant="phone" animateCharge={animateCharge} />
     </div>
   )
 }
diff --git a/src/components/home/scroll-story/devices/pos-screen.tsx b/src/components/home/scroll-story/devices/pos-screen.tsx
index 07fe8d4e..c2952805 100644
--- a/src/components/home/scroll-story/devices/pos-screen.tsx
+++ b/src/components/home/scroll-story/devices/pos-screen.tsx
@@ -45,10 +45,12 @@ function LandscapePos({
   w,
   h,
   register,
+  animateCharge,
 }: {
   w: number
   h: number
   register: string
+  animateCharge: boolean
 }) {
   const rail = 24
   const bar = 20
@@ -230,7 +232,18 @@ function LandscapePos({
       <text x={w - 8} y={h - 31} textAnchor="end" fontSize="6" fontWeight="700" fill={ink.text}>
         $69.00
       </text>
-      <rect x={cartX + 8} y={h - 25} width={cartW - 16} height={16} rx={4} fill={ink.red} />
+      <rect x={cartX + 8} y={h - 25} width={cartW - 16} height={16} rx={4} fill={ink.red}>
+        {/* same store, same data: every device's Charge button breathes on
+            the same clock (document timeline), a quiet sync cue */}
+        {animateCharge ? (
+          <animate
+            attributeName="opacity"
+            values="1;0.72;1"
+            dur="2.4s"
+            repeatCount="indefinite"
+          />
+        ) : null}
+      </rect>
       <text
         x={cartX + cartW / 2}
         y={h - 14}
@@ -245,7 +258,7 @@ function LandscapePos({
   )
 }
 
-function PhonePos() {
+function PhonePos({ animateCharge }: { animateCharge: boolean }) {
   const w = 112
   const h = 242
   const cols = 2
@@ -312,7 +325,16 @@ function PhonePos() {
       })}
 
       {/* charge bar + bottom nav */}
-      <rect x={6} y={h - navH - 20} width={w - 12} height={15} rx={4} fill={ink.red} />
+      <rect x={6} y={h - navH - 20} width={w - 12} height={15} rx={4} fill={ink.red}>
+        {animateCharge ? (
+          <animate
+            attributeName="opacity"
+            values="1;0.72;1"
+            dur="2.4s"
+            repeatCount="indefinite"
+          />
+        ) : null}
+      </rect>
       <text x={w / 2} y={h - navH - 9.5} textAnchor="middle" fontSize="6.5" fontWeight="700" fill="#fff">
         Charge $69
       </text>
@@ -338,10 +360,12 @@ export function PosScreen({
   variant = 'tablet',
   register = 'Register 1',
   className,
+  animateCharge = true,
 }: {
   variant?: 'tablet' | 'laptop' | 'phone'
   register?: string
   className?: string
+  animateCharge?: boolean
 }) {
   return (
     <div
@@ -352,12 +376,13 @@ export function PosScreen({
       )}
     >
       {variant === 'phone' ? (
-        <PhonePos />
+        <PhonePos animateCharge={animateCharge} />
       ) : (
         <LandscapePos
           w={variant === 'tablet' ? 436 : 400}
           h={variant === 'tablet' ? 294 : 236}
           register={register}
+          animateCharge={animateCharge}
         />
       )}
     </div>
diff --git a/src/components/home/scroll-story/devices/tablet.tsx b/src/components/home/scroll-story/devices/tablet.tsx
index a22f35d1..614ce3d4 100644
--- a/src/components/home/scroll-story/devices/tablet.tsx
+++ b/src/components/home/scroll-story/devices/tablet.tsx
@@ -7,7 +7,13 @@ import styles from '../story.module.css'
  * shot through to the cloud act. The bezel is a CSS stand-in for the future
  * hyper-real render; the screen is always the live DOM PosScreen.
  */
-export function DeviceTablet({ className }: { className?: string }) {
+export function DeviceTablet({
+  className,
+  animateCharge = true,
+}: {
+  className?: string
+  animateCharge?: boolean
+}) {
   return (
     <div
       aria-hidden="true"
@@ -17,7 +23,7 @@ export function DeviceTablet({ className }: { className?: string }) {
         className
       )}
     >
-      <PosScreen variant="tablet" />
+      <PosScreen variant="tablet" animateCharge={animateCharge} />
     </div>
   )
 }
diff --git a/src/components/home/scroll-story/scroll-story.test.tsx b/src/components/home/scroll-story/scroll-story.test.tsx
index e57c2596..a2e2b1df 100644
--- a/src/components/home/scroll-story/scroll-story.test.tsx
+++ b/src/components/home/scroll-story/scroll-story.test.tsx
@@ -30,11 +30,13 @@ vi.mock('motion/react', async () => {
 
 afterEach(() => {
   cleanup()
+  vi.restoreAllMocks()
   vi.unstubAllGlobals()
   motionMock.progressHandlers.length = 0
 })
 
 function stubMatchMedia({ reducedMotion }: { reducedMotion: boolean }) {
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null)
   vi.stubGlobal(
     'matchMedia',
     vi.fn((query: string) => ({
@@ -151,6 +153,13 @@ describe('ScrollStory', () => {
     expect(screen.getAllByTestId('story-static')).toHaveLength(2)
   })
 
+  it('omits Charge pulse animations under prefers-reduced-motion', () => {
+    stubMatchMedia({ reducedMotion: true })
+    render(<ScrollStory />)
+
+    expect(document.querySelector('animate')).not.toBeInTheDocument()
+  })
+
   it('disables every scroll-story animation under prefers-reduced-motion', () => {
     const style = document.createElement('style')
     style.textContent = readFileSync(
diff --git a/src/components/home/scroll-story/scroll-story.tsx b/src/components/home/scroll-story/scroll-story.tsx
index d7aeb38e..f58a822d 100644
--- a/src/components/home/scroll-story/scroll-story.tsx
+++ b/src/components/home/scroll-story/scroll-story.tsx
@@ -9,6 +9,7 @@ import {
   type MotionValue,
 } from 'motion/react'
 import { cn } from '@/lib/utils'
+import { AmbientGradient } from '@/components/ui/ambient-gradient'
 import { CounterProps } from './acts/counter-props'
 import { CloudSync } from './acts/cloud-sync'
 import { CyclingDevice } from './acts/cycling-device'
@@ -68,26 +69,24 @@ function usePrefersReducedMotion() {
  * in the DOM, switched by CSS, so SSR needs no viewport knowledge.
  */
 export function ScrollStory() {
+  const reducedMotion = usePrefersReducedMotion()
+
   return (
     <>
       <div className="hidden md:block">
-        <PinnedStory />
+        {reducedMotion ? (
+          <StoryStatic animateDevices={false} />
+        ) : (
+          <PinnedStoryScroller />
+        )}
       </div>
       <div className="md:hidden">
-        <StoryStatic />
+        <StoryStatic animateDevices={!reducedMotion} />
       </div>
     </>
   )
 }
 
-function PinnedStory() {
-  const reducedMotion = usePrefersReducedMotion()
-  if (reducedMotion) {
-    return <StoryStatic />
-  }
-  return <PinnedStoryScroller />
-}
-
 function PinnedStoryScroller() {
   const tone = 'onLight' as const
   const scrollerRef = React.useRef<HTMLDivElement>(null)
@@ -178,21 +177,10 @@ function PinnedStoryScroller() {
           )}
           style={{ opacity: bgSlateOpacity }}
         >
-          {/* the one continuous background: a slow-breathing brand gradient
-              that ties acts 2-4 together (per-act patterns removed — the
-              acts now illustrate their point with foreground animation) */}
-          <div
-            className={cn(
-              'absolute -inset-x-[10%] -inset-y-[20%]',
-              styles.ribbonWrap
-            )}
-          >
-            <div className={cn('absolute left-[8%] top-[-18%] h-[70%] w-[55%] rounded-full', styles.ribbonBlob1)} />
-            <div className={cn('absolute right-[-6%] top-[6%] h-[75%] w-[60%] rounded-full', styles.ribbonBlob2)} />
-            <div className={cn('absolute bottom-[-22%] left-[34%] h-[60%] w-[46%] rounded-full', styles.ribbonBlob3)} />
-            <div className={cn('absolute bottom-[-8%] left-[-8%] h-[52%] w-[38%] rounded-full', styles.ribbonBlob4)} />
-          </div>
-          <div className={cn('absolute inset-0', styles.ribbonMask)} />
+          {/* the one continuous background tying acts 2-4 together: our own
+              shader gradient (Stripe-inspired in spirit, original in code —
+              see ui/ambient-gradient.tsx and ADR 0013) */}
+          <AmbientGradient className="absolute inset-0" />
         </motion.div>
 
         {/* act 1 counter dressing */}
diff --git a/src/components/home/scroll-story/story-static.tsx b/src/components/home/scroll-story/story-static.tsx
index 21efd8fe..dccff224 100644
--- a/src/components/home/scroll-story/story-static.tsx
+++ b/src/components/home/scroll-story/story-static.tsx
@@ -45,7 +45,11 @@ function StageStrip({
   )
 }
 
-export function StoryStatic() {
+export function StoryStatic({
+  animateDevices = true,
+}: {
+  animateDevices?: boolean
+}) {
   return (
     <div data-testid="story-static">
       <Section tone="none" spacing="hero" className={cn('overflow-hidden', styles.woodCounterLight)}>
@@ -56,7 +60,7 @@ export function StoryStatic() {
           <CopyAct1 headingLevel={1} tone="onLight" />
         </div>
         <StageStrip className="h-[240px] sm:h-[300px]">
-          <DeviceTablet />
+          <DeviceTablet animateCharge={animateDevices} />
         </StageStrip>
       </Section>
 
@@ -65,9 +69,12 @@ export function StoryStatic() {
           <CopyAct2 tone="onLight" />
         </div>
         <StageStrip className="h-[220px] sm:h-[280px]">
-          <DevicePhone />
-          <DeviceTablet className="h-[240px] w-[348px]" />
-          <DeviceLaptop className="w-[340px]" />
+          <DevicePhone animateCharge={animateDevices} />
+          <DeviceTablet
+            className="h-[240px] w-[348px]"
+            animateCharge={animateDevices}
+          />
+          <DeviceLaptop className="w-[340px]" animateCharge={animateDevices} />
         </StageStrip>
       </Section>
 
diff --git a/src/components/home/scroll-story/story.module.css b/src/components/home/scroll-story/story.module.css
index 6409d620..020154a0 100644
--- a/src/components/home/scroll-story/story.module.css
+++ b/src/components/home/scroll-story/story.module.css
@@ -219,10 +219,6 @@
   .barcodePattern,
   .particlesA,
   .particlesB,
-  .ribbonBlob1,
-  .ribbonBlob2,
-  .ribbonBlob3,
-  .ribbonBlob4,
   .lightPool {
     animation: none;
   }
@@ -411,58 +407,3 @@
   animation: story-particles-rise 26s linear infinite;
 }
 
-/* Stripe-style mesh ribbon, CSS approximation for the prototype. Production
-   note (ADR-bound): swap for a ~10kb WebGL mesh (minigl-style) with this as
-   the static fallback; blobs animate transform-only under a parent blur. */
-@keyframes story-blob-a {
-  to {
-    transform: translate(9%, 14%) scale(1.12);
-  }
-}
-
-@keyframes story-blob-b {
-  to {
-    transform: translate(-10%, -8%) scale(1.08) rotate(8deg);
-  }
-}
-
-@keyframes story-blob-c {
-  to {
-    transform: translate(6%, -12%) scale(1.15);
-  }
-}
-
-.ribbonWrap {
-  filter: blur(52px) saturate(1.15);
-  opacity: 0.75;
-}
-
-.ribbonBlob1 {
-  background: radial-gradient(circle, #ff9a5c, transparent 65%);
-  animation: story-blob-a 11s ease-in-out infinite alternate;
-}
-
-.ribbonBlob2 {
-  background: radial-gradient(circle, #f14f6d, transparent 65%);
-  animation: story-blob-b 13s ease-in-out infinite alternate;
-}
-
-.ribbonBlob3 {
-  background: radial-gradient(circle, #8b5cf6, transparent 65%);
-  animation: story-blob-c 17s ease-in-out infinite alternate;
-}
-
-.ribbonBlob4 {
-  background: radial-gradient(circle, #ffd08a, transparent 65%);
-  animation: story-blob-b 15s ease-in-out infinite alternate-reverse;
-}
-
-.ribbonMask {
-  background: linear-gradient(
-    105deg,
-    rgb(253 252 251 / 1) 26%,
-    rgb(253 252 251 / 0) 44%,
-    rgb(253 252 251 / 0) 74%,
-    rgb(253 252 251 / 0.9) 90%
-  );
-}
diff --git a/src/components/ui/ambient-gradient.test.tsx b/src/components/ui/ambient-gradient.test.tsx
new file mode 100644
index 00000000..675c8b48
--- /dev/null
+++ b/src/components/ui/ambient-gradient.test.tsx
@@ -0,0 +1,131 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen } from '@testing-library/react'
+import { AmbientGradient } from './ambient-gradient'
+
+type IntersectionCallback = (
+  entries: Array<Pick<IntersectionObserverEntry, 'isIntersecting'>>
+) => void
+
+const webgl = {
+  VERTEX_SHADER: 1,
+  FRAGMENT_SHADER: 2,
+  COMPILE_STATUS: 3,
+  LINK_STATUS: 4,
+  ARRAY_BUFFER: 5,
+  STATIC_DRAW: 6,
+  FLOAT: 7,
+  TRIANGLES: 8,
+  createShader: vi.fn(() => ({})),
+  shaderSource: vi.fn(),
+  compileShader: vi.fn(),
+  getShaderParameter: vi.fn(() => true),
+  createProgram: vi.fn(() => ({})),
+  attachShader: vi.fn(),
+  linkProgram: vi.fn(),
+  getProgramParameter: vi.fn(() => true),
+  useProgram: vi.fn(),
+  createBuffer: vi.fn(() => ({})),
+  bindBuffer: vi.fn(),
+  bufferData: vi.fn(),
+  getAttribLocation: vi.fn(() => 0),
+  enableVertexAttribArray: vi.fn(),
+  vertexAttribPointer: vi.fn(),
+  getUniformLocation: vi.fn(() => ({})),
+  uniform3fv: vi.fn(),
+  viewport: vi.fn(),
+  uniform2f: vi.fn(),
+  uniform1f: vi.fn(),
+  drawArrays: vi.fn(),
+}
+
+function stubMatchMedia({ reducedMotion }: { reducedMotion: boolean }) {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn((query: string) => ({
+      matches: query.includes('prefers-reduced-motion') ? reducedMotion : false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }))
+  )
+}
+
+function stubObservers(onIntersection?: (callback: IntersectionCallback) => void) {
+  class MockResizeObserver {
+    observe = vi.fn()
+    disconnect = vi.fn()
+  }
+  class MockIntersectionObserver {
+    observe = vi.fn()
+    disconnect = vi.fn()
+
+    constructor(callback: IntersectionCallback) {
+      onIntersection?.(callback)
+    }
+  }
+  vi.stubGlobal('ResizeObserver', MockResizeObserver)
+  vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
+}
+
+function stubWebglContext(context: WebGLRenderingContext | null = webgl as unknown as WebGLRenderingContext) {
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context)
+}
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+describe('AmbientGradient', () => {
+  it('sizes the CSS fallback like the canvas path', () => {
+    stubWebglContext(null)
+
+    render(<AmbientGradient />)
+
+    expect(screen.getByTestId('ambient-gradient-fallback')).toHaveClass(
+      'h-full',
+      'w-full'
+    )
+  })
+
+  it('keeps context-loss fallback active under reduced motion', () => {
+    stubMatchMedia({ reducedMotion: true })
+    stubObservers()
+    stubWebglContext()
+
+    render(<AmbientGradient />)
+
+    const canvas = screen.getByTestId('ambient-gradient')
+    act(() => {
+      canvas.dispatchEvent(new Event('webglcontextlost', { cancelable: true }))
+    })
+
+    expect(screen.getByTestId('ambient-gradient-fallback')).toBeInTheDocument()
+  })
+
+  it('does not resume animation on visibilitychange while offscreen', () => {
+    let intersectionCallback: IntersectionCallback | undefined
+    const requestAnimationFrame = vi.fn(() => 1)
+    stubMatchMedia({ reducedMotion: false })
+    stubObservers((callback) => {
+      intersectionCallback = callback
+    })
+    stubWebglContext()
+    vi.stubGlobal('requestAnimationFrame', requestAnimationFrame)
+    vi.stubGlobal('cancelAnimationFrame', vi.fn())
+
+    render(<AmbientGradient />)
+
+    act(() => {
+      intersectionCallback?.([{ isIntersecting: false }])
+      document.dispatchEvent(new Event('visibilitychange'))
+    })
+
+    expect(requestAnimationFrame).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/components/ui/ambient-gradient.tsx b/src/components/ui/ambient-gradient.tsx
new file mode 100644
index 00000000..c0a4592e
--- /dev/null
+++ b/src/components/ui/ambient-gradient.tsx
@@ -0,0 +1,291 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * AmbientGradient — the site's signature animated backdrop.
+ *
+ * Original implementation (Stripe-inspired in spirit, not in code): a tiny
+ * WebGL fragment shader runs domain-warped value noise through the brand
+ * palette inside a diagonal band, fading to warm white where copy sits.
+ * Motion drifts slowly upward — an echo of the homepage's coffee steam —
+ * rather than Stripe's horizontal wave.
+ *
+ * Behaviour:
+ * - rAF only while on screen (IntersectionObserver) and the tab is visible
+ * - prefers-reduced-motion renders a single static frame
+ * - no WebGL (or context loss) → static CSS gradient fallback
+ * - DPR capped at 1.5: it's a blurry gradient, extra pixels buy nothing
+ */
+
+const VERT = `
+attribute vec2 a_pos;
+void main() {
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}
+`
+
+const FRAG = `
+precision mediump float;
+uniform vec2 u_res;
+uniform float u_t;
+uniform vec3 u_c0;
+uniform vec3 u_c1;
+uniform vec3 u_c2;
+uniform vec3 u_c3;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x),
+    f.y
+  );
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  for (int i = 0; i < 4; i++) {
+    v += a * noise(p);
+    p *= 2.03;
+    a *= 0.5;
+  }
+  return v;
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_res;
+  vec2 p = uv * vec2(u_res.x / u_res.y, 1.0) * 1.6;
+  float t = u_t * 0.05;
+
+  // rising domain warp (steam nod), but rendered as energy, not cloud
+  vec2 q = vec2(fbm(p + vec2(0.0, t)), fbm(p + vec2(5.2, t * 0.8)));
+  float f = fbm(p + 2.2 * q + vec2(t * 0.6, -t));
+
+  vec3 col = mix(u_c0, u_c1, smoothstep(0.2, 0.6, f));
+  col = mix(col, u_c2, smoothstep(0.32, 0.68, q.x) * 0.85);
+  col = mix(col, u_c3, smoothstep(0.42, 0.78, q.y) * 0.6);
+
+  // digital structure 1: terraced contour lines through the field (holo/topo)
+  float steps = 16.0;
+  float cell = fract(f * steps);
+  float contour = 1.0 - smoothstep(0.0, 0.10, min(cell, 1.0 - cell));
+  col = mix(col, col * 0.9 + vec3(0.06), contour * 0.35);
+
+  // digital structure 2: a bright filament riding the field's midline
+  float filament = 1.0 - smoothstep(0.0, 0.045, abs(f - 0.52));
+  col += filament * 0.18 * mix(u_c2, vec3(1.0), 0.4);
+
+  // our diagonal: bottom-left to upper-right, easing to cool white outside
+  float d = uv.x + (1.0 - uv.y) * 0.9;
+  float band = smoothstep(0.1, 0.65, d - 0.35) * (1.0 - smoothstep(0.9, 1.35, d));
+  vec3 base = vec3(0.985, 0.99, 0.998);
+  col = mix(base, col, band * 0.92);
+
+  gl_FragColor = vec4(col, 1.0);
+}
+`
+
+// bright but calm: blue-led with pink and yellow splashes (owner: no warm
+// red/orange washes, blues fine, brighter like the original CSS pass).
+const DEFAULT_COLORS: [string, string, string, string] = [
+  '#8ad2ff',
+  '#5b8def',
+  '#ff9ec8',
+  '#ffd76a',
+]
+
+function hexToVec3(hex: string): [number, number, number] {
+  const value = parseInt(hex.slice(1), 16)
+  return [
+    ((value >> 16) & 255) / 255,
+    ((value >> 8) & 255) / 255,
+    (value & 255) / 255,
+  ]
+}
+
+const FALLBACK_BG =
+  'radial-gradient(ellipse 60% 70% at 72% 22%, #5b8def55, transparent 70%),' +
+  'radial-gradient(ellipse 55% 65% at 88% 60%, #ff9ec84d, transparent 70%),' +
+  'radial-gradient(ellipse 50% 60% at 55% 95%, #ffd76a40, transparent 70%),' +
+  '#fbfcfe'
+
+export function AmbientGradient({
+  className,
+  colors = DEFAULT_COLORS,
+}: {
+  className?: string
+  colors?: [string, string, string, string]
+}) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const [fallback, setFallback] = React.useState(false)
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const gl = canvas.getContext('webgl', {
+      antialias: false,
+      depth: false,
+      stencil: false,
+      powerPreference: 'low-power',
+    })
+    if (!gl) {
+      setFallback(true)
+      return
+    }
+
+    function compile(type: number, source: string) {
+      const shader = gl!.createShader(type)
+      if (!shader) return null
+      gl!.shaderSource(shader, source)
+      gl!.compileShader(shader)
+      if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) return null
+      return shader
+    }
+
+    const vert = compile(gl.VERTEX_SHADER, VERT)
+    const frag = compile(gl.FRAGMENT_SHADER, FRAG)
+    const program = gl.createProgram()
+    if (!vert || !frag || !program) {
+      setFallback(true)
+      return
+    }
+    gl.attachShader(program, vert)
+    gl.attachShader(program, frag)
+    gl.linkProgram(program)
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      setFallback(true)
+      return
+    }
+    gl.useProgram(program)
+
+    // one fullscreen triangle
+    const buffer = gl.createBuffer()
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 3, -1, -1, 3]),
+      gl.STATIC_DRAW
+    )
+    const aPos = gl.getAttribLocation(program, 'a_pos')
+    gl.enableVertexAttribArray(aPos)
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0)
+
+    const uRes = gl.getUniformLocation(program, 'u_res')
+    const uTime = gl.getUniformLocation(program, 'u_t')
+    const uniforms = ['u_c0', 'u_c1', 'u_c2', 'u_c3'].map((name, i) => {
+      const location = gl.getUniformLocation(program, name)
+      gl.uniform3fv(location, hexToVec3(colors[i]))
+      return location
+    })
+    void uniforms
+
+    const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+    function resize() {
+      if (!canvas || !gl) return
+      const width = Math.max(1, Math.round(canvas.clientWidth * dpr))
+      const height = Math.max(1, Math.round(canvas.clientHeight * dpr))
+      if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width
+        canvas.height = height
+        gl.viewport(0, 0, width, height)
+      }
+      gl.uniform2f(uRes, canvas.width, canvas.height)
+    }
+    resize()
+    const resizeObserver = new ResizeObserver(resize)
+    resizeObserver.observe(canvas)
+
+    const started = performance.now()
+    function drawFrame() {
+      if (!gl) return
+      gl.uniform1f(uTime, (performance.now() - started) / 1000)
+      gl.drawArrays(gl.TRIANGLES, 0, 3)
+    }
+
+    const reducedMotion = window.matchMedia(
+      '(prefers-reduced-motion: reduce)'
+    ).matches
+    let frame = 0
+    let running = false
+    const tick = () => {
+      drawFrame()
+      frame = requestAnimationFrame(tick)
+    }
+    const start = () => {
+      if (!running) {
+        running = true
+        frame = requestAnimationFrame(tick)
+      }
+    }
+    const stop = () => {
+      running = false
+      cancelAnimationFrame(frame)
+    }
+
+    const onContextLost = (event: Event) => {
+      event.preventDefault()
+      stop()
+      setFallback(true)
+    }
+    canvas.addEventListener('webglcontextlost', onContextLost)
+
+    if (reducedMotion) {
+      drawFrame()
+      resizeObserver.disconnect()
+      return () => {
+        canvas.removeEventListener('webglcontextlost', onContextLost)
+      }
+    }
+
+    let isIntersecting = false
+    const updateRunning = () => {
+      if (isIntersecting && !document.hidden) start()
+      else stop()
+    }
+
+    const io = new IntersectionObserver(([entry]) => {
+      isIntersecting = Boolean(entry?.isIntersecting)
+      updateRunning()
+    })
+    io.observe(canvas)
+    const onVisibility = updateRunning
+    document.addEventListener('visibilitychange', onVisibility)
+
+    return () => {
+      stop()
+      io.disconnect()
+      resizeObserver.disconnect()
+      document.removeEventListener('visibilitychange', onVisibility)
+      canvas.removeEventListener('webglcontextlost', onContextLost)
+    }
+  }, [colors])
+
+  if (fallback) {
+    return (
+      <div
+        aria-hidden="true"
+        className={cn('pointer-events-none h-full w-full', className)}
+        style={{ background: FALLBACK_BG }}
+        data-testid="ambient-gradient-fallback"
+      />
+    )
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className={cn('pointer-events-none h-full w-full', className)}
+      data-testid="ambient-gradient"
+    />
+  )
+}