/motion-design-replication

name: motion-design-replication
description: Rebuild the feel of a reference motion-design clip (camera, depth of field, easing, captions, outro) as an on-brand agent-swarm piece in Remotion, then prove it with side-by-side frames and a model re-read of the replica. Use when asked to "replicate this video's vibe for the swarm", "make one like this but ours", or to rebuild a competitor/product clip. Runs after motion-design-video-analysis.
metadata:
  type: procedure

Motion-design replication

Takes a reference clip and produces a replica that matches its craft (resolution, fps, duration, camera, DOF, easing, caption style, outro) while swapping everything brand-specific (palette, logo, shapes, copy) for agent-swarm's. Built on a run that rebuilt Linear's "Loops updates" dial as a Schedules teaser. Keep the working R3F + postprocessing + label setup from your first 3D composition in your Remotion project and reuse it.

The bar is the highest quality of content. A render that passes automated checks proves nothing about how it looks. The loop in Step 5 is the work.

Step 1 — analyse and write the rebuild spec

Run `motion-design-video-analysis` on the reference, including its rebuild-spec section and the by-eye claim check. You need, in frames: every cut, every caption change, every transition window. Pull 10 fps windows around each transition; a cut hidden under a fast element reads as a "camera move" to both you and the model until you step frames.

Step 2 — pick the swarm subject and map it onto the reference's metaphor

Pick the feature whose shape matches the reference's central object (a dial ⇒ Schedules, because a dial reads as a clock and a clock maps onto cron). Write captions that follow one real run of that feature, in product vocabulary, checked against the repo docs (`agent-swarm/docs-site/content/docs/`). Keep the reference's caption count and rhythm, not its words.

Step 3 — collect real brand assets; never redraw

Copy, don't approximate. For Agent Swarm:

• **Mark**: `apps/ui/public/logo.png` in `desplega-ai/agent-swarm` (the hex mark; byte-identical to `docs-site/public/logo.png` and `https://agent-swarm.dev/logo.png`; verify with `sha256sum`). There is no logo SVG.
• **Wordmark**: "Agent Swarm", Space Grotesk 600, tracking -0.01em, near-white. If your project only vendors Space Grotesk 400/500/700, 600 renders as 700; say so if it matters.
• **Fonts**: Space Grotesk (display) + Space Mono (labels).
• **Colour**: amber-400 #fabc00, amber-300 #ffd237, zinc-950 #09090b, zinc-400 #9f9fa9 (amber-500 #f69e00 reads brown at low alpha). three.js wants hex: convert oklch tokens with culori (`formatHex(clampChroma(parse(x),'oklch'))`).
• **Feature icons**: the app's own lucide icons (`apps/ui/src/components/layout/app-sidebar.tsx`), e.g. Schedules = `ClockIcon`.

Keep the reference's grade (e.g. dark, low-key) and let the brand accent carry only the "live" elements, or the piece stops reading like the reference.

Step 4 — build in your Remotion project

See `video-generation` for the project layout. New composition under `src/compositions/<Name>/`, registered in `src/Root.tsx`, timeline constants in a `timeline.ts` in frames. Land it as a draft PR; never merge.

For a 3D reference use `@remotion/three` + three.js + `postprocessing`. Traps that each cost an hour on the first run:

1. **GL backend**: only `--gl=swangle` works in worker containers (`angle`, `egl`, `swiftshader`, `vulkan` all fail "Error creating WebGL context"). 2. **`@react-three/postprocessing` renders black under Remotion.** It builds its composer in a `useEffect`, after Remotion's single per-frame `advance()`. Build `postprocessing`'s `EffectComposer` yourself in a `useMemo` and render it from `useFrame(..., 1)`. 3. **Anything that loads async inside the canvas misses the frame.** Remotion advances R3F once per frame; a texture that lands after that is never captured. Preload outside `<ThreeCanvas>` behind `delayRender`, mount the canvas when ready. 4. **troika-three-text is invisible under swangle** (typesets, empty SDF atlas). Draw labels to a 2D canvas with the loaded webfont and use a `CanvasTexture` on a plane (`alphaTest` + `depthWrite` so DOF sees them). A 3-row texture with the text in the middle row makes a free mask for caption rolls (slide `texture.offset.y`). 5. **DOF focus is wrong unless you call `cocMaterial.adoptCameraSettings(camera)`** after changing near/far. Set `cocMaterial.focusDistance` / `focusRange` in world units per frame; scale `bokehScale` by `canvasWidth / 1920` so previews match the master. 6. **Transparent draw order**: a transparent dial surface drawn after an additive `depthWrite:false` element paints over it. Give the base surface `renderOrder={-10}` and effects a high one. Dynamic `BufferGeometry` needs `frustumCulled={false}` (its bounding sphere is computed once, from zeros). 7. **Render cost**: swangle saturates every core, so `--concurrency` beyond 2 buys nothing. MSAA and full-res DOF dominate (~2.6 s/frame with MSAA 4 + full-res DOF; with `multisampling: 0` and DOF `resolutionScale: 0.5` a 858-frame piece renders in ~7.5 min at 960x540 and ~8–9 min at 1080p). `--scale=0.333` fails (non-integer height); use 0.5 for previews. 8. **Font delayRender timeout**: `loadFont` in `src/theme/fonts.ts` can hold a delayRender that fires ~118 s into a long render and kills it. Pass `--timeout=3600000`, then check the outro frames actually use the brand font. 9. **Audio**: if your `remotion.config.ts` mutes the project, pass `--muted=false` and verify with `ffmpeg -i out.mp4` that an audio stream exists. 10. **Color range**: add `--color-space=bt709` or the mp4 comes out full-range `yuvj420p` (see `video-generation`).

Camera per shot = keyframed position/look/fov/focus in a pure `camAt(frame)` function, set inside `useFrame`. Express positions relative to the subject (radial out / tangential / up) so a shot survives geometry changes.

Step 5 — build → look → c