← Back to prompts

Prompt · June 13, 2026

Create Motion Graphics

As seen in my YouTube video, this is the prompt for creating Motion Graphics with Claude

/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 <Id> out/<name>.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: <Sfx at={frame} name="click" volume={0.2} />. 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 &lt;Still&gt; 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\]

Copy this prompt as markdown