diff --git a/docs/adr/0014-site-motion-language.md b/docs/adr/0014-site-motion-language.md
new file mode 100644
index 00000000..f678d156
--- /dev/null
+++ b/docs/adr/0014-site-motion-language.md
@@ -0,0 +1,62 @@
+# 0014 — 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/motion/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 `motion` (scroll,
+  springs, gestures, SVG pathLength) plus the custom canvas/WebGL
+  primitives (DotOrbit, AmbientGradient) for the signature surfaces. A
+  `three` + `@react-three/fiber` 3D centerpiece (pointer-reactive spike
+  burst) was prototyped and **rejected** (owner, 2026-07-02): visually
+  strong, but not worth carrying a 3D library for a site with no other 3D
+  need. Do not reintroduce a 3D dependency for decorative motion. 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. The owner's
+  preferred DotOrbit accent variant: dense blue-led
+  (`dots={190} ringRadius={120} size={340}` with the blue/pink/yellow
+  palette from the kit evaluation).
diff --git a/src/components/home/scroll-story/acts/dot-orbit.tsx b/src/components/home/scroll-story/acts/dot-orbit.tsx
index a3934aea..fe86d235 100644
--- a/src/components/home/scroll-story/acts/dot-orbit.tsx
+++ b/src/components/home/scroll-story/acts/dot-orbit.tsx
@@ -1,171 +1,4 @@
-'use client'
-
-import * as React from 'react'
-
-/**
- * Pointer-reactive dot ring (Stripe-style): ~130 dots drift slowly around a
- * circle; dots near the cursor are gently attracted to it and ease back when
- * it leaves. Canvas + rAF, paused when off-screen (IntersectionObserver) or
- * when the tab is hidden; skipped entirely under prefers-reduced-motion
- * (static ring is drawn once instead).
- */
-
-const DOTS = 130
-const SIZE = 520
-const RING_RADIUS = 190
-const ATTRACT_RADIUS = 130
-const ATTRACT_STRENGTH = 0.22
-const RETURN_EASE = 0.06
-
-type Dot = {
-  angle: number
-  radius: number
-  speed: number
-  size: number
-  hue: 'slate' | 'red' | 'purple'
-  x: number
-  y: number
-}
-
-function makeDots(): Dot[] {
-  const hues: Dot['hue'][] = ['slate', 'slate', 'slate', 'red', 'purple']
-  return Array.from({ length: DOTS }, (_, i) => {
-    const angle = (i / DOTS) * Math.PI * 2 + Math.sin(i * 7.3) * 0.12
-    const radius = RING_RADIUS + Math.sin(i * 3.7) * 26 + Math.cos(i * 1.9) * 12
-    return {
-      angle,
-      radius,
-      speed: 0.0009 + (Math.abs(Math.sin(i * 5.1)) * 0.0012),
-      size: 1.1 + Math.abs(Math.sin(i * 2.3)) * 1.5,
-      hue: hues[i % hues.length],
-      x: 0,
-      y: 0,
-    }
-  })
-}
-
-const COLORS: Record<Dot['hue'], string> = {
-  slate: 'rgba(100, 116, 139, 0.55)',
-  red: 'rgba(205, 32, 31, 0.5)',
-  purple: 'rgba(127, 84, 179, 0.55)',
-}
-
-export function DotOrbit({ className }: { className?: string }) {
-  const canvasRef = React.useRef<HTMLCanvasElement>(null)
-
-  React.useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    const context = canvas.getContext('2d')
-    if (!context) return
-
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    canvas.width = SIZE * dpr
-    canvas.height = SIZE * dpr
-    context.scale(dpr, dpr)
-
-    const dots = makeDots()
-    const center = SIZE / 2
-    const pointer = { x: -9999, y: -9999 }
-    const reducedMotion = window.matchMedia(
-      '(prefers-reduced-motion: reduce)'
-    ).matches
-
-    function draw(animate: boolean) {
-      if (!context) return
-      context.clearRect(0, 0, SIZE, SIZE)
-      for (const dot of dots) {
-        if (animate) dot.angle += dot.speed
-        const targetX = center + Math.cos(dot.angle) * dot.radius
-        const targetY = center + Math.sin(dot.angle) * dot.radius * 0.86
-
-        if (dot.x === 0 && dot.y === 0) {
-          dot.x = targetX
-          dot.y = targetY
-        }
-
-        const dx = pointer.x - dot.x
-        const dy = pointer.y - dot.y
-        const dist = Math.hypot(dx, dy)
-        if (animate && dist < ATTRACT_RADIUS) {
-          const pull = (1 - dist / ATTRACT_RADIUS) * ATTRACT_STRENGTH
-          dot.x += dx * pull
-          dot.y += dy * pull
-        } else {
-          dot.x += (targetX - dot.x) * RETURN_EASE
-          dot.y += (targetY - dot.y) * RETURN_EASE
-        }
-
-        context.beginPath()
-        context.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2)
-        context.fillStyle = COLORS[dot.hue]
-        context.fill()
-      }
-    }
-
-    if (reducedMotion) {
-      draw(false)
-      return
-    }
-
-    let frame = 0
-    let running = false
-    const tick = () => {
-      draw(true)
-      frame = requestAnimationFrame(tick)
-    }
-    const start = () => {
-      if (!running) {
-        running = true
-        frame = requestAnimationFrame(tick)
-      }
-    }
-    const stop = () => {
-      running = false
-      cancelAnimationFrame(frame)
-    }
-
-    const io = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting && !document.hidden) start()
-      else stop()
-    })
-    io.observe(canvas)
-
-    const onVisibility = () => {
-      if (document.hidden) stop()
-      else start()
-    }
-    document.addEventListener('visibilitychange', onVisibility)
-
-    const onPointerMove = (event: PointerEvent) => {
-      const rect = canvas.getBoundingClientRect()
-      // rect is post-transform; map back into the canvas's logical square
-      pointer.x = ((event.clientX - rect.left) / rect.width) * SIZE
-      pointer.y = ((event.clientY - rect.top) / rect.height) * SIZE
-    }
-    const onPointerLeave = () => {
-      pointer.x = -9999
-      pointer.y = -9999
-    }
-    window.addEventListener('pointermove', onPointerMove, { passive: true })
-    window.addEventListener('pointerleave', onPointerLeave)
-
-    return () => {
-      stop()
-      io.disconnect()
-      document.removeEventListener('visibilitychange', onVisibility)
-      window.removeEventListener('pointermove', onPointerMove)
-      window.removeEventListener('pointerleave', onPointerLeave)
-    }
-  }, [])
-
-  return (
-    <canvas
-      ref={canvasRef}
-      aria-hidden="true"
-      className={className}
-      style={{ width: SIZE, height: SIZE }}
-      data-testid="dot-orbit"
-    />
-  )
-}
+// Compatibility shim: DotOrbit moved to the motion kit (ADR 0014) and grew
+// props for dot count, size and palette — the defaults reproduce this
+// homepage ring exactly. New code should import from '@/components/motion'.
+export { DotOrbit } from '@/components/motion/dot-orbit'
diff --git a/src/components/motion/ambient-gradient.tsx b/src/components/motion/ambient-gradient.tsx
new file mode 100644
index 00000000..df007e9e
--- /dev/null
+++ b/src/components/motion/ambient-gradient.tsx
@@ -0,0 +1,293 @@
+'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)
+  const colorsKey = colors.join('|')
+
+  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 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
+    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)
+      if (reducedMotion) drawFrame()
+    }
+    resize()
+    const resizeObserver = new ResizeObserver(resize)
+    resizeObserver.observe(canvas)
+
+    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) {
+      return () => {
+        resizeObserver.disconnect()
+        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)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [colorsKey])
+
+  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"
+    />
+  )
+}
diff --git a/src/components/motion/dot-orbit.tsx b/src/components/motion/dot-orbit.tsx
new file mode 100644
index 00000000..b901717d
--- /dev/null
+++ b/src/components/motion/dot-orbit.tsx
@@ -0,0 +1,200 @@
+'use client'
+
+import * as React from 'react'
+
+/**
+ * Pointer-reactive dot ring (Stripe-style): dots drift slowly around a
+ * circle; dots near the cursor are gently attracted to it and ease back when
+ * it leaves. Canvas + rAF, paused when off-screen (IntersectionObserver) or
+ * when the tab is hidden; skipped entirely under prefers-reduced-motion
+ * (static ring is drawn once instead).
+ *
+ * Generalized from the homepage scroll-story act 4: dot count, canvas size,
+ * ring radius and palette are configurable; defaults reproduce the homepage
+ * ring exactly.
+ */
+
+const ATTRACT_STRENGTH = 0.22
+const RETURN_EASE = 0.06
+
+// Homepage defaults: mostly slate with brand red/purple accents (weighted
+// by repetition — dot i takes palette[i % palette.length]).
+const DEFAULT_PALETTE = [
+  'rgba(100, 116, 139, 0.55)',
+  'rgba(100, 116, 139, 0.55)',
+  'rgba(100, 116, 139, 0.55)',
+  'rgba(205, 32, 31, 0.5)',
+  'rgba(127, 84, 179, 0.55)',
+]
+
+type Dot = {
+  angle: number
+  radius: number
+  speed: number
+  size: number
+  color: string
+  x: number
+  y: number
+}
+
+function makeDots(count: number, ringRadius: number, palette: string[]): Dot[] {
+  return Array.from({ length: count }, (_, i) => {
+    const angle = (i / count) * Math.PI * 2 + Math.sin(i * 7.3) * 0.12
+    const radius = ringRadius + Math.sin(i * 3.7) * 26 + Math.cos(i * 1.9) * 12
+    return {
+      angle,
+      radius,
+      speed: 0.0009 + Math.abs(Math.sin(i * 5.1)) * 0.0012,
+      size: 1.1 + Math.abs(Math.sin(i * 2.3)) * 1.5,
+      color: palette[i % palette.length],
+      x: 0,
+      y: 0,
+    }
+  })
+}
+
+export type DotOrbitProps = {
+  className?: string
+  /** Number of dots on the ring. */
+  dots?: number
+  /** Logical canvas size in CSS pixels (square). */
+  size?: number
+  /** Base ring radius; dots scatter ±~38px around it. */
+  ringRadius?: number
+  /**
+   * Dot colors, assigned round-robin — repeat a color to weight it
+   * (e.g. three slate entries + one accent ≈ 3:1 mix).
+   */
+  palette?: string[]
+}
+
+export function DotOrbit({
+  className,
+  dots = 130,
+  size = 520,
+  ringRadius = 190,
+  palette = DEFAULT_PALETTE,
+}: DotOrbitProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const attractRadius = size / 4
+  // stable key so a new array literal with the same colors does not reset
+  // the ring on every parent render
+  const paletteKey = palette.join('|')
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const context = canvas.getContext('2d')
+    if (!context) return
+
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    canvas.width = size * dpr
+    canvas.height = size * dpr
+    context.scale(dpr, dpr)
+
+    const ring = makeDots(dots, ringRadius, palette)
+    const center = size / 2
+    const pointer = { x: -9999, y: -9999 }
+    const reducedMotion = window.matchMedia(
+      '(prefers-reduced-motion: reduce)'
+    ).matches
+
+    function draw(animate: boolean) {
+      if (!context) return
+      context.clearRect(0, 0, size, size)
+      for (const dot of ring) {
+        if (animate) dot.angle += dot.speed
+        const targetX = center + Math.cos(dot.angle) * dot.radius
+        const targetY = center + Math.sin(dot.angle) * dot.radius * 0.86
+
+        if (dot.x === 0 && dot.y === 0) {
+          dot.x = targetX
+          dot.y = targetY
+        }
+
+        const dx = pointer.x - dot.x
+        const dy = pointer.y - dot.y
+        const dist = Math.hypot(dx, dy)
+        if (animate && dist < attractRadius) {
+          const pull = (1 - dist / attractRadius) * ATTRACT_STRENGTH
+          dot.x += dx * pull
+          dot.y += dy * pull
+        } else {
+          dot.x += (targetX - dot.x) * RETURN_EASE
+          dot.y += (targetY - dot.y) * RETURN_EASE
+        }
+
+        context.beginPath()
+        context.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2)
+        context.fillStyle = dot.color
+        context.fill()
+      }
+    }
+
+    if (reducedMotion) {
+      draw(false)
+      return
+    }
+
+    let frame = 0
+    let running = false
+    const tick = () => {
+      draw(true)
+      frame = requestAnimationFrame(tick)
+    }
+    const start = () => {
+      if (!running) {
+        running = true
+        frame = requestAnimationFrame(tick)
+      }
+    }
+    const stop = () => {
+      running = false
+      cancelAnimationFrame(frame)
+    }
+
+    const io = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !document.hidden) start()
+      else stop()
+    })
+    io.observe(canvas)
+
+    const onVisibility = () => {
+      if (document.hidden) stop()
+      else start()
+    }
+    document.addEventListener('visibilitychange', onVisibility)
+
+    const onPointerMove = (event: PointerEvent) => {
+      const rect = canvas.getBoundingClientRect()
+      // rect is post-transform; map back into the canvas's logical square
+      pointer.x = ((event.clientX - rect.left) / rect.width) * size
+      pointer.y = ((event.clientY - rect.top) / rect.height) * size
+    }
+    const onPointerLeave = () => {
+      pointer.x = -9999
+      pointer.y = -9999
+    }
+    window.addEventListener('pointermove', onPointerMove, { passive: true })
+    window.addEventListener('pointerleave', onPointerLeave)
+
+    return () => {
+      stop()
+      io.disconnect()
+      document.removeEventListener('visibilitychange', onVisibility)
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerleave', onPointerLeave)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dots, size, ringRadius, paletteKey])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className={className}
+      style={{ width: size, height: size }}
+      data-testid="dot-orbit"
+    />
+  )
+}
diff --git a/src/components/motion/index.ts b/src/components/motion/index.ts
new file mode 100644
index 00000000..804d9acb
--- /dev/null
+++ b/src/components/motion/index.ts
@@ -0,0 +1,13 @@
+/**
+ * The motion kit (ADR 0014 — site motion language).
+ *
+ * One library pushed hard — `motion` for scroll/springs/gestures — plus the
+ * custom canvas/WebGL primitives (AmbientGradient, DotOrbit) for the two
+ * signature surfaces. Every piece is IO/visibility gated and reduced-motion
+ * aware. A three/R3F 3D centerpiece was prototyped and rejected (2026-07-02):
+ * not worth a 3D library for a site with no other 3D need.
+ */
+
+export { AmbientGradient } from './ambient-gradient'
+export { DotOrbit, type DotOrbitProps } from './dot-orbit'
+export { Reveal, type RevealProps } from './reveal'
diff --git a/src/components/motion/motion-kit.test.tsx b/src/components/motion/motion-kit.test.tsx
new file mode 100644
index 00000000..8a99944b
--- /dev/null
+++ b/src/components/motion/motion-kit.test.tsx
@@ -0,0 +1,257 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { AmbientGradient, DotOrbit, Reveal } from '@/components/motion'
+
+const motionMock = vi.hoisted(() => ({ reducedMotion: false }))
+
+const MOTION_ONLY_PROPS = ['initial', 'whileInView', 'viewport', 'transition']
+
+vi.mock('motion/react', async () => {
+  const React = await import('react')
+  return {
+    motion: {
+      div: ({
+        children,
+        ...props
+      }: Record<string, unknown> & { children?: React.ReactNode }) => {
+        // strip motion-only props so they do not leak onto the DOM node
+        const domProps = Object.fromEntries(
+          Object.entries(props).filter(
+            ([key]) => !MOTION_ONLY_PROPS.includes(key)
+          )
+        )
+        return React.createElement(
+          'div',
+          { ...domProps, 'data-motion': 'true' },
+          children
+        )
+      },
+    },
+    useReducedMotion: () => motionMock.reducedMotion,
+  }
+})
+
+function stubObservers({ reducedMotion = false } = {}) {
+  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(),
+    }))
+  )
+  const observe = vi.fn()
+  const resizeObserve = vi.fn()
+  const resizeDisconnect = vi.fn()
+  class IntersectionObserverStub {
+    observe = observe
+    disconnect = vi.fn()
+    unobserve = vi.fn()
+  }
+  class ResizeObserverStub {
+    observe = resizeObserve
+    disconnect = resizeDisconnect
+    unobserve = vi.fn()
+  }
+  vi.stubGlobal('IntersectionObserver', IntersectionObserverStub)
+  vi.stubGlobal('ResizeObserver', ResizeObserverStub)
+  return { observe, resizeObserve, resizeDisconnect }
+}
+
+function stubAnimationFrame() {
+  const requestAnimationFrame = vi.fn(() => 1)
+  const cancelAnimationFrame = vi.fn()
+  vi.stubGlobal('requestAnimationFrame', requestAnimationFrame)
+  vi.stubGlobal('cancelAnimationFrame', cancelAnimationFrame)
+  return { requestAnimationFrame, cancelAnimationFrame }
+}
+
+function stubMissingCanvasContext() {
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null)
+}
+
+function stubCanvas2dContext() {
+  const context = {
+    scale: vi.fn(),
+    clearRect: vi.fn(),
+    beginPath: vi.fn(),
+    arc: vi.fn(),
+    fill: vi.fn(),
+    set fillStyle(_value: string) {},
+  } as unknown as CanvasRenderingContext2D
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context)
+  return context
+}
+
+function stubWebglContext() {
+  const gl = {
+    VERTEX_SHADER: 35633,
+    FRAGMENT_SHADER: 35632,
+    COMPILE_STATUS: 35713,
+    LINK_STATUS: 35714,
+    ARRAY_BUFFER: 34962,
+    STATIC_DRAW: 35044,
+    FLOAT: 5126,
+    TRIANGLES: 4,
+    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(),
+  } as unknown as WebGLRenderingContext
+  const getContext = vi
+    .spyOn(HTMLCanvasElement.prototype, 'getContext')
+    .mockReturnValue(gl)
+  return { gl, getContext }
+}
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+  motionMock.reducedMotion = false
+})
+
+describe('motion kit index', () => {
+  it('exports the three primitives', () => {
+    expect(AmbientGradient).toBeTypeOf('function')
+    expect(DotOrbit).toBeTypeOf('function')
+    expect(Reveal).toBeTypeOf('function')
+  })
+})
+
+describe('Reveal', () => {
+  it('wraps children in a whileInView motion element', () => {
+    stubObservers()
+    render(
+      <Reveal className="stagger">
+        <p>revealed copy</p>
+      </Reveal>
+    )
+
+    const text = screen.getByText('revealed copy')
+    expect(text).toBeInTheDocument()
+    expect(text.parentElement).toHaveAttribute('data-motion', 'true')
+    expect(text.parentElement).toHaveClass('stagger')
+  })
+
+  it('renders a plain, fully visible div under prefers-reduced-motion', () => {
+    stubObservers()
+    motionMock.reducedMotion = true
+    render(
+      <Reveal className="stagger">
+        <p>revealed copy</p>
+      </Reveal>
+    )
+
+    const wrapper = screen.getByText('revealed copy').parentElement
+    expect(wrapper).not.toHaveAttribute('data-motion')
+    expect(wrapper).toHaveClass('stagger')
+  })
+})
+
+describe('DotOrbit', () => {
+  it('sizes the canvas from the size prop', () => {
+    stubObservers()
+    stubMissingCanvasContext()
+    render(<DotOrbit size={340} />)
+
+    const canvas = screen.getByTestId('dot-orbit')
+    expect(canvas.tagName).toBe('CANVAS')
+    expect(canvas).toHaveStyle({ width: '340px', height: '340px' })
+    expect(canvas).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('keeps the homepage default size', () => {
+    stubObservers()
+    stubMissingCanvasContext()
+    render(<DotOrbit />)
+
+    expect(screen.getByTestId('dot-orbit')).toHaveStyle({
+      width: '520px',
+      height: '520px',
+    })
+  })
+
+  it('draws one static ring under prefers-reduced-motion', () => {
+    const { observe } = stubObservers({ reducedMotion: true })
+    const { requestAnimationFrame } = stubAnimationFrame()
+    const context = stubCanvas2dContext()
+
+    render(<DotOrbit dots={3} />)
+
+    expect(context.clearRect).toHaveBeenCalledWith(0, 0, 520, 520)
+    expect(context.arc).toHaveBeenCalledTimes(3)
+    expect(requestAnimationFrame).not.toHaveBeenCalled()
+    expect(observe).not.toHaveBeenCalled()
+  })
+})
+
+describe('AmbientGradient', () => {
+  it('falls back to the static CSS gradient when WebGL is unavailable', async () => {
+    stubObservers()
+    stubMissingCanvasContext()
+    render(<AmbientGradient />)
+
+    const fallback = await screen.findByTestId('ambient-gradient-fallback')
+    expect(fallback).toHaveAttribute('aria-hidden', 'true')
+    await waitFor(() =>
+      expect(screen.queryByTestId('ambient-gradient')).not.toBeInTheDocument()
+    )
+  })
+
+  it('draws one frame and keeps resize observation under prefers-reduced-motion', () => {
+    const { resizeObserve, resizeDisconnect } = stubObservers({
+      reducedMotion: true,
+    })
+    const { requestAnimationFrame } = stubAnimationFrame()
+    const { gl } = stubWebglContext()
+
+    render(<AmbientGradient />)
+
+    expect(gl.drawArrays).toHaveBeenCalledTimes(1)
+    expect(requestAnimationFrame).not.toHaveBeenCalled()
+    expect(resizeObserve).toHaveBeenCalledWith(
+      screen.getByTestId('ambient-gradient')
+    )
+    expect(resizeDisconnect).not.toHaveBeenCalled()
+  })
+
+  it('does not recreate WebGL for a new equal colors array', () => {
+    stubObservers()
+    stubAnimationFrame()
+    const { getContext } = stubWebglContext()
+    const colors: [string, string, string, string] = [
+      '#8ad2ff',
+      '#5b8def',
+      '#ff9ec8',
+      '#ffd76a',
+    ]
+
+    const { rerender } = render(<AmbientGradient colors={[...colors]} />)
+    rerender(<AmbientGradient colors={[...colors]} />)
+
+    expect(getContext).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/src/components/motion/reveal.tsx b/src/components/motion/reveal.tsx
new file mode 100644
index 00000000..bdfdbb2d
--- /dev/null
+++ b/src/components/motion/reveal.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import * as React from 'react'
+import { motion, useReducedMotion } from 'motion/react'
+
+/**
+ * Reveal — the kit's scroll-into-view primitive (ADR 0014).
+ *
+ * Fades + lifts children as they enter the viewport: transform/opacity only,
+ * under 500ms, once by default. Under prefers-reduced-motion it renders a
+ * plain, fully visible div (no animation, no initial-hidden state).
+ *
+ * Interaction feedback stays fast per the motion rules — keep `delay` for
+ * small stagger steps (≤0.3s), not for long choreography.
+ */
+
+export type RevealProps = {
+  children: React.ReactNode
+  className?: string
+  /** Delay in seconds — use for small stagger steps between siblings. */
+  delay?: number
+  /** Vertical offset in px the content rises from. */
+  y?: number
+  /** Animate only the first time it enters the viewport. */
+  once?: boolean
+}
+
+export function Reveal({
+  children,
+  className,
+  delay = 0,
+  y = 16,
+  once = true,
+}: RevealProps) {
+  const reducedMotion = useReducedMotion()
+
+  if (reducedMotion) {
+    return <div className={className}>{children}</div>
+  }
+
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once, amount: 0.3 }}
+      transition={{ duration: 0.45, delay, ease: [0.21, 0.47, 0.32, 0.98] }}
+    >
+      {children}
+    </motion.div>
+  )
+}
diff --git a/src/components/ui/ambient-gradient.tsx b/src/components/ui/ambient-gradient.tsx
new file mode 100644
index 00000000..d73a76a7
--- /dev/null
+++ b/src/components/ui/ambient-gradient.tsx
@@ -0,0 +1,4 @@
+// Compatibility shim: AmbientGradient moved to the motion kit (ADR 0014).
+// The scroll-story branch imports it from here; new code should import
+// from '@/components/motion' directly.
+export { AmbientGradient } from '@/components/motion/ambient-gradient'