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

[SomeRandmGuyy]

Summary

Replaces the CSS-3D clip engine on the landing page with a three.js clipping engine with moving parts, in the same style as the Spectrum Web Co engine (anime.js + three.js), themed for ClippyOS.

• The machine (src/components/marketing/engine/clip-engine-scene.ts): octagonal chassis, six pumping pistons, a glass core with a spinning crystal and rising sparks, three render rotors, two film reels feeding a moving film strip, a hook scanner ring, a cutter that slams the strip into clips (with a flash), an approval gate, a crown of four transmitters that broadcast ripples, and a library vault. Twelve clips move between formations (halo → reel → cut tray → render spiral → gate arc → broadcast → vault stack → Hermes orbit → halo) while the camera orbits and finishes with a full lap.
• anime.js drives it: the onScroll timeline scrubs the engine's stage progress plus the readout (mode, stage, timecode, live orbit/pitch/dist), panels and HUD; anime.js also runs the assembly intro, stage pulses, pointer parallax and the transmitter ripple loops.
• Data model (src/lib/clip-engine.ts): per-stage configs (camera + which parts run) and clip formations as pure functions, covered by src/lib/clip-engine.test.ts.
• three.js is loaded with a dynamic import, so only the landing page pays for it. Theme toggle recolours the engine live (dark and light palettes). The render loop pauses when the stage is off screen.
• prefers-reduced-motion: the engine renders once, assembled, and nothing animates. Without WebGL the stage keeps its readouts over a static glow.
• Copy, chapters, Rolling out / Live labels, demo form, FAQ and captures are unchanged. Adds a vertical parts legend (2 film reels · 3 render rotors · 4 transmitters · 12 clips).

Type of change

• feat — new capability
• fix — bug fix
• docs — documentation only
• refactor — no behavior change
• chore / ci — tooling and pipeline

Verification

• src/lib/clip-engine.test.ts — 17/17 pass
• npm run typecheck — tsc --noEmit exit 0
• npm run lint — eslint src/components/marketing src/lib/clip-engine.ts src/lib/clip-engine.test.ts exit 0; prettier clean on changed files
• UI touched: Vercel preview driven with Playwright + Chromium (SwiftShader WebGL) — every stage rendered in isolation, plus the real page at 1440×900 dark and light, 390×844 mobile and reduced motion. WebGL canvas created, no page errors, no horizontal overflow. Only console error is the existing platform-chrome CSP block of grok.com/grok-app-builder/extensions.js.
• Auth/routes touched: n/a

Contracts check

• No secrets committed; .env.example documents names only
• Server-only code stayed under src/lib/server/ / *.server.ts (no server code touched)
• If schema changed: n/a
• Platform chrome untouched

🤖 Generated with Claude Code

https://claude.ai/code/session_01AzZUDyzfUAfxJAXaPfiq8t

---

Note

Low Risk
Marketing-only landing visuals and bundle size (three.js on /); no auth, API, or server paths touched. Residual UX risk is WebGL performance and the camera readout/parallax mismatch.

Overview
Replaces the landing page’s CSS-3D clip demo with a WebGL three.js “clipping machine” that scroll still drives through anime.js, while three.js only loads on / via dynamic import.

The pinned stage is now an empty data-engine-host canvas (clip-engine-scene.ts) showing chassis, pistons, reels, film strip, scanner, cutter, gate, transmitters, vault, and 12 clips moving through named formations. Scroll scrubs a shared EngineView.progress instead of per-frame CSS variables; anime.js still handles HUD/panels, assembly intro, parallax, and ripples. clip-engine.ts is rewritten around per-stage engineStateAt / clipPoseAt (camera + part intensities + formations), with expanded tests.

UI/CSS: drops the large 3D frame/core CSS; adds canvas sizing, WebGL fallback glow, vertical parts legend, camera readout, and approvals grouped by network (3 clips × 4 networks). Docs: README describes the three.js engine. Deps: three + @types/three.

Note: Greptile flagged that the orbit/pitch/dist readout ignores pointer parallax (scroll-only); still open in this diff.

^{Reviewed by Cursor Bugbot for commit 2228f02. Bugbot is set up for automated code reviews on this repo. Configure here.}

Confidence Score: 5/5

The PR appears safe to merge based on the reviewed changes and resolved prior findings.

Summary

The PR replaces the landing page’s CSS-3D demo with a dynamically loaded, scroll-driven three.js engine. Since the previous review, it shifts the approval gate, conveyor, camera, and tint threshold together; the earlier findings’ threads are resolved.

• Twelve clips move through the engine’s stage formations, with updated tests and readouts.
• The recent gate adjustment keeps the conveyor aligned with the gate.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Scroll[Scroll timeline] --> View[Engine progress]
  View --> Formations[Clip formations]
  View --> Camera[Camera and moving parts]
  Formations --> Gate[Approval gate]
  Gate --> Broadcast[Broadcast]
  Broadcast --> Vault[Library vault]

Loading

_{Reviews (3) · Last reviewed commit: "fix(marketing): centre the approval conv..."}

[vercel]

Deployment failed for project clippyos with the following error:

Hobby accounts are limited to daily cron jobs. This cron expression (*/15 * * * *) would run more than once per day. Upgrade to the Pro plan to unlock all Cron Jobs features on Vercel.

Learn More: https://vercel.link/3Fpeeb1

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
clippyos	Ready	Preview	Sep 28, 2026 7:34am UTC

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_931b0063-2bbf-4172-8d2f-239edb00e4e5)

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_fa1e4d2e-3844-49a7-be8c-5d453891402f)

Dismissed because a newer commit was pushed; Greptile will re-review the current head.

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_9944b555-c026-4c63-8072-0f38e2f87dcc)