feat(marketing): three.js clipping engine with moving parts

README.md

@@ -67,25 +67,30 @@ Plus two audiences beyond the operator:
 ### Landing clip engine
 
 The landing page is a scroll-driven story built on [anime.js](https://animejs.com)
-v4, in the same style as the Spectrum Web Co and Desk Lanes sites. A pinned
-CSS-3D stage (`src/components/marketing/clip-engine.tsx`) holds the ClippyOS
-clip engine: twelve footage frames around a spinning ClippyOS core. Scrolling
-the chapters in `src/components/marketing/landing-page.tsx` scrubs one timeline
-in `src/components/marketing/anime/landing-motion.ts` with `onScroll`: the ring
-unrolls into a film strip, hooks are detected and cut into four clips, the
-clips are captioned into vertical cards, signed off in Approvals, fanned out to
-X, YouTube, Instagram and TikTok, stacked into the Library, and pulled into the
-Hermes loop. The same file runs the hero intro (split text, boot LEDs, frames
-dropping into the ring), split-word reveals, the scroll HUD and magnetic
-buttons, all inside one `createScope` that is reverted on unmount.
-
-The engine is a labelled demo run. Poses per stage come from
+v4 and [three.js](https://threejs.org), in the same style as the Spectrum Web Co
+engine. A pinned WebGL stage (`src/components/marketing/engine/clip-engine-scene.ts`)
+renders the ClippyOS clipping engine as a machine with moving parts: an octagonal
+chassis, pumping pistons, a glass core with a spinning crystal, three render
+rotors, two film reels feeding a film strip, a hook scanner, a cutter that slams
+the strip into clips, an approval gate, a crown of four transmitters that
+broadcast ripples, and a library vault. Twelve clips move between formations
+(halo, reel, cut row, render spiral, gate arc, broadcast, vault stack, Hermes
+orbit) while the camera orbits the engine.
+
+Scrolling the chapters in `src/components/marketing/landing-page.tsx` scrubs one
+anime.js timeline in `src/components/marketing/anime/landing-motion.ts` with
+`onScroll`; it drives the engine's stage progress, the readout, panels and HUD.
+anime.js also runs the engine assembly intro, stage pulses, pointer parallax,
+transmitter ripples, split-word reveals and magnetic buttons. three.js is loaded
+with a dynamic import so it only ships to the landing page.
+
+The engine is a labelled demo run. Stage configs and clip formations live in
 `src/lib/clip-engine.ts` and are covered by `src/lib/clip-engine.test.ts`.
 Ingest, detect, cut and caption/render are marked Rolling out until the native
 clipping pipeline ships (see [Roadmap](#roadmap)); approvals, the Social
 Machine, the Library and Hermes are marked Live. With
-`prefers-reduced-motion`, the stage renders one static formation and nothing
-animates.
+`prefers-reduced-motion`, the engine renders once, assembled, and nothing
+animates. Without WebGL the stage keeps its readouts over a static glow.
 
 ## Architecture
 

package.json

@@ -74,6 +74,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.3.0",
+    "three": "^0.186.1",
     "tw-animate-css": "^1.3.4",
     "undici": "^8.10.0",
     "vaul": "^1.1.2",
@@ -88,6 +89,7 @@
     "@types/pg": "^8.11.10",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "@types/three": "^0.186.0",
     "@vitejs/plugin-react": "^5.2.0",
     "eslint": "^9.20.0",
     "eslint-config-prettier": "^10.1.1",