# Create Motion Graphics > As seen in my YouTube video, this is the prompt for creating Motion Graphics with Claude *Prompt · June 13, 2026* /model claude-fable-5\[1m\] You are setting up a motion-graphics explainer-video studio from scratch, in this empty folder, using Remotion + React + TypeScript. I make short vertical explainers for TikTok/IG that teach one technical idea through VISUAL MECHANISM, not floating text. Build the whole system, then prove it by shipping one \~40s video. Work in this order and don't skip the design system. ## 0. Stack & project - Remotion 4 + React 19 + TypeScript. `@remotion/cli`, `@remotion/transitions`, `@remotion/google-fonts`. - Format: 1080×1350 (4:5), 30fps. (4:5 wins more vertical feed real estate than 9:16 while staying safe in-frame.) - Scripts: `dev` → `remotion studio`, `render` → `remotion render out/.mp4`, `typecheck` → `tsc --noEmit`. ## 1. Brand tokens FIRST — src/design/tokens.ts A two-accent editorial system. NEVER pure white, NEVER pure black. - Canvas: cream (#F4EFE5). Type: ink (#0E1717). Give yourself full cream/ink/accent ramps (50–900). - Pick TWO accents with assigned MEANING and hold the rule across every scene. Mine: copper (#B05F2A) = "the protocol / the new thing", teal (#1E4E4E) = "response / authority". One accent is reserved — nothing in the "before/problem" world is allowed to use it, so its first appearance lands. - Export W=1080, H=1350, FPS=30. ## 2. Fonts — src/fonts.ts Load via @remotion/google-fonts. Four roles: a display serif (e.g. Andada Pro) for big stamps, an italic serif (Newsreader italic) for editorial flourish/"next up", a clean sans (Inter) for body, a mono (JetBrains Mono) for kickers/filenames/code-y labels. Roles are fixed; don't freestyle fonts per scene. ## 3. Animation core — src/design/anim.ts This is what separates it from generic AI motion. Build: - A single brand ease: `Easing.bezier(0.22, 1, 0.36, 1)` — fast catch, gentle settle, NO bounce. - `ramp(frame, start, dur)` (eased 0→1 clamped), `rampLin` (linear, for constant-speed travel), `bump` (sine 0→1→0 for pulses/nudges). - `seededRandom(seed)` — Remotion renders across processes, so NEVER Math.random(); all jitter is seeded and deterministic. - A `Route` class: takes sparse control points, smooths them with Chaikin corner-cutting, and exposes exact `.length` (for stroke-dashoffset draw-on) and arc-length `pointAt(t)` (so dots travel a curve at constant speed). This is the backbone — connections draw on, dots ride them. - `wobbleControls(...)` — sine wobble with an envelope that's zero at both endpoints, so wires can tremble without detaching from their nodes. ## 4. Reusable visual primitives — src/design/pieces.tsx Recurring PROXIES that mean the same thing in every scene, so the audience learns your visual language: a model chip, a tool/data tile with custom glyphs (db cylinder, file sheets, { } braces, globe), a "bus"/spine node, flow dots (accent A = request, accent B = response), click-rings, draw-on strokes, and typed `displayStyle`/`eyebrowStyle` helpers. Build the vocabulary once; scenes just arrange it. ## 5. Sound — src/design/sfx.tsx + scripts/make-sfx.mjs Synthesize subtle SFX (click, pop, thud, ding, whoosh, tick, muted buzz) into public/sfx/ with a node script. Scenes cue them declaratively: ``. Keep volumes deliberately QUIET — the voiceover owns the mix; SFX just punctuate impacts. ## 6. Storyboard BEFORE scenes — docs/STORYBOARD.md For each scene write: frame count, the VO line, the IMAGE (what mechanism is on screen), the PAYOFF (the frozen frame that explains the idea), and the PRIMARY MOTION. A scene earns its place only if it shows a mechanism. Banned: stat-counter cards, "step 01/02/03" lists, floating headline+body+caption layouts. If a beat is just text, redesign it as a thing that moves. ## 7. Hook grammar (frame 0 discipline) Action is ALREADY happening at frame 0 — e.g. a comet mid-flight races in and its IMPACT stamps the title all at once. Never open on a text fade-in. Title stamps land ON the impact, not before it. First \~4s must show motion, not introduce it. ## 8. Scene architecture - One file per scene in src/scenes/ (S1Hook … S6Close). Everything inside a scene is keyed to LOCAL frames. - Assemble with TransitionSeries in the composition root; scene DURATIONS live in one SCENES array there, so the whole video re-times to a recorded VO by editing one list. - Register compositions in src/Root.tsx. Also make 9:16 (1080×1920) still thumbnails as <Still> compositions. ## 9. Ship one to prove it Pick a topic (ask me, or use "Why MCP matters in 30 seconds"). Write the storyboard, build 6 scenes, assemble, `typecheck`, and render to out/. Then tell me the `remotion studio` command so I can scrub and tweak timings. Build the foundation (tokens → anim → pieces → sfx) before any scene. Show me the storyboard for sign-off before you animate. Everything you build should adhere to the design system createed in Claude Design linked below: Fetch this design file, read its readme, and implement the relevant aspects of the design. \[INSERT Claude Design Package HERE\] [Open on the site →](https://www.agenticamit.com/prompt/create-motion-graphics)