Routes and tech
At kickoff, Claude picks a route based on what you are making. Each route has its own step-by-step guide, loaded only when needed.
| Route | For | Engines |
|---|---|---|
html-video (default) | Promo, presentation, graphic explainer, short, logo, kinetic type | HTML/CSS, GSAP, canvas rendered by umd capture; HyperFrames; Remotion; Revideo |
threejs-film | A character or an object in a small 3D world | three.js or WebGPU in a single HTML file, corrected shot by shot |
blender | Real materials, rigged characters, product renders | Blender driven through Python and its MCP server, BlenderKit |
director | Narrated story, many scenes, generated images and voices | Claude directs, other models draw and speak, under a strict licence registry |
explainer | Maths, diagrams, code, terminal | Manim, Mermaid, D2, Code Hike, VHS |
web-page | Website, landing page, UI | GSAP, Motion, CSS, View Transitions, Lenis, animated shadcn registries |
On top of that:
- 15 proven recipes: product launch, product demo, presentation video, explainer, logo sting, kinetic typography, vertical short, data story, hero section, page transitions, scrollytelling, micro-interactions, narrative short, recurring animated series, and matching a reference animation (broken down shot by shot);
- 17 engine guides, including a sorted list of 60 effect, 3D, physics, sound and editing libraries with their licence and what to watch for a reproducible render;
- craft guides: launch-film grammar, animation principles, motion tokens, composition and safe areas, on-screen text (and copy a stranger understands in 3 s), anti "AI slop";
- audio guides: sound design (which sound on which picture event), commercial-safe voices, music and sound effects, mixing, captions;
- practical guides: assets, platform specs, licences.
1 323 proven styles, prompts and blocks serve as starting points:
- 66 film styles and the 98 OPUSCAR styles (one per Best Picture winner) from lemo-opuscar;
- 15 scored motion-design styles from mg-styles-15;
- 703 creator prompts from awesome-opus5-5-videos;
- 441 ready-made blocks and components from the HyperFrames registry.
Every entry is tagged by project type (promo, presentation, explainer, vertical short, logo, animated short, web page, 3D shot), mood, look, format and quality tier. Your agent picks from the library on its own: before fixing a look, the storyboard runs umd styles match, which ranks the whole library against your brief, then shows you the best three, or takes the first if you leave the choice to it. To choose by eye: the Library filters everything by project type and style, with a preview of each result and its prompt to copy. Ready-to-copy prompts and advice: the Tips and prompts page.
Two files keep the trace of the research:
- catalogue_motion_design_claude_codex_2026.md lists 1,113 GitHub repositories, checked on 9 and 10 November 2026, with licence warnings;
- SOURCES.md lists every link shared, tested or used since the project started (315), with what was done with it and why some were set aside.
Deterministic rendering
umd capture opens your page in Chromium (through Playwright) on a small local server. Before any of the page's scripts runs, it replaces these with virtual time:
- the clock (
Date,performance.now); requestAnimationFrameand timers;Math.random, made reproducible with a seed.
On every frame it pauses every CSS and Web Animations animation and every <video> element, and sets each to the right time. Libraries driven by requestAnimationFrame (GSAP, three.js, Lottie, p5…) advance one step per frame. FFmpeg then encodes the screenshots. You can also define window.umdRender(t) to control everything yourself. Tested on a GSAP and three.js scene: two renders give byte-identical frames.
Every guide
Claude reads each guide only when it needs it. They are in English, the most token-efficient language.
Routes
| Guide | In one line |
|---|---|
| Route R2 — Claude writes Python, Blender renders | Claude scripts the scene in bpy as files, Blender renders frames headless, FFmpeg encodes. The Blender MCP is optional: it helps to explore a scene live, nothing in this route needs it. Pick it for real objects, physic |
| Route R4 — Claude directs, other models draw, speak and move | Claude writes the script, shot list and prompts, calls image, voice, music and video models, then assembles the film in code. Pick it for narrated stories with many illustrated scenes, when drawing every frame in code wo |
| Route — Technical explainer (Manim, diagrams, code, terminal) | A sub-route of R1 (or R4 when imagery is generated) for teaching: maths, algorithms, architecture, code walkthroughs and CLI demos, cut to a voice-over. Structure comes from text sources (Python scenes, diagram code, cod |
| Route R1 — HTML video drawn by code | Every frame is HTML/CSS/SVG/Canvas computed from time, then captured to MP4. The cheapest and fastest route: pick it for flat or graphic styles, promos, launch films, explainers, kinetic type, data and shorts. |
| Route R3 — One three.js scene, fixed shot by shot | One HTML file holds one three.js world; the film is a list of shots (camera + events) over that world, captured frame by frame. Pick it for a character or object living in a small stylised 3D world. |
| Route — Animated web page (no video output) | The deliverable is a live site, landing page or UI whose motion runs in the visitor's browser. Same craft as R1, different proof: frames dropped, layout shift and reduced-motion behaviour replace the render audit. |
Recipes
| Guide | In one line |
|---|---|
| Recipe — Concepts before style | Three film concepts in the same format, compared side by side, before any style or beat. A style gives a look; it does not give an idea. When the brief asks for something "more evolved", "less template", or only says wha |
| Recipe — Data story (animated charts and numbers) | Numbers and charts that build in the order the story needs them: a count-up, a bar that wins, a line that breaks its trend. For video (report films, social stats, launch proof beats) and pages (dashboards, landing stats) |
| Recipe — Explainer video | Makes one idea understood in 60–180 s: a problem the viewer recognises, a mechanism shown step by step, a takeaway. Routes: ../routes/html-video.md for product and concept explainers, ../routes/explainer.md for maths, co |
| Recipe — Animated hero section | The first viewport of a site: headline, value line, call to action, and one living visual (shader, 3D object, product UI, type reveal) that loads fast and never blocks reading. Route: ../routes/web-page.md. |
| Recipe — Kinetic typography | Text is the image: words enter, transform and exit in rhythm with a voice or a track. Works as a video (quotes, lyric-style promos, manifestos, shorts) or on a page (headlines, scroll type). Routes: ../routes/html-video. |
| Recipe — Product launch film | A 20–60 s film in the Apple/Linear register: the product's own interface becomes the hero, cut to music, every state change driven by a cursor or a morph. Default route: ../routes/html-video.md. |
| Recipe — Logo sting / ident (2–6 s) | A short reveal that ends on the exact logo lockup, used as intro, outro, bumper or loading moment. Built from the logo's own vector geometry, with an optional sound logo. Route: ../routes/html-video.md (SVG); 3D variants |
| Match a reference animation | Measure how a reference moves (a live site, a screen recording, an mp4/gif, a Lottie, a WebGL scene) and turn it into a motion spec, motion tokens and, when allowed, a verified rebuild. Companion skill: reanimate (Ni |
| Recipe — Micro-interactions | Small, fast feedback on a single control: press, toggle, hover, focus, loading, success, error. Duration 100–300 ms, purpose always "the system heard you" or "here is what changed". Route: ../routes/web-page.md. |
| Recipe — Narrative short with a character | A 30–120 s animated short where a character wants something small, tries, meets a surprise, and looks at the camera. Acting carries it: eyes first, body after, never fully still. Routes: ../routes/threejs-film.md (charac |
| Recipe — Page transitions | Motion between routes or pages that keeps the user oriented: what stays, what leaves, where the new content comes from. Native View Transitions first, a library only when the site needs it. Route: ../routes/web-page.md. |
| Recipe — Presentation video (company, product, project) | A 1–3 min narrated video built from a deck or a script: a voice leads, each slide becomes a designed scene with purposeful motion, captions on. Route: ../routes/html-video.md; voice from ../audio/voice.md. |
| Recipe — Product demo video | Shows how a product is used: a task from start to result, cursor-led, with zooms on what matters. Two ways to get the pixels: recode the UI as animation, or film the real app with Playwright. Route: ../routes/htm |
| Recipe — Scrollytelling | A story told as the reader scrolls: a sticky visual changes state at each text step, or a pinned scene scrubs with scroll. The reader controls the pace; motion follows scroll, never fights it. Route: ../routes/web-page.m |
| A recurring animated series | A series with the same hero, the same world and a new short episode on a schedule, for a brand or an app. One clip gets a view; a recurring character builds an audience, which is what a business pays for every month. Met |
| Recipe — Social short (9:16 Shorts, Reels, TikTok) | A 15–60 s vertical video that must stop the scroll in the first 1–2 s, read with sound off, and survive the platform's overlay UI. Route: ../routes/html-video.md (fast), ../routes/director.md for narrated faceless format |
Engines
| Guide | In one line |
|---|---|
| Blender (bpy, MCP, headless render) | Full 3D DCC driven from Python: modelling, materials, lights, keyframes, Geometry Nodes, physics, EEVEE/Cycles rendering, all scriptable with bpy and renderable headless. Pick it when the piece needs real materials, ri |
| Canvas 2D and generative: p5.js, PixiJS, two.js, paper.js, canvas-sketch | Immediate-mode drawing for particles, generative patterns, data art, hand-drawn looks and many-object scenes. Pick canvas when SVG/DOM would need thousands of nodes or when the look is procedural; draw every frame as a p |
| CSS animations, WAAPI, View Transitions, scroll-driven animations | Native platform motion: no dependency, compositor-friendly, seekable by umd capture. Pick it first for hover/focus/enter states, page transitions, scroll-linked progress and simple loops; reach for GSAP or Motion only |
| Diagrams, code and terminal: Mermaid, D2, Excalidraw, Code Hike, VHS, asciinema | Text-first tools that produce structure (diagrams), code steps and terminal sessions an agent can generate reliably, then animate. Pick them for technical explainers, product architecture, dev-tool demos and docs videos. |
| Effect and engine libraries | The open-source libraries that keep coming back in "free motion studio" lists, sorted by job, with their licence and what to watch in a deterministic render. Licences checked on GitHub on 2026-11-10. Read the row you nee |
| GSAP | Timeline-based JavaScript animation for DOM, SVG, canvas and any object. All plugins (SplitText, ScrollTrigger, Flip, MorphSVG, CustomEase…) are free, including commercial use. The default engine for HTML video captured |
| HyperFrames | HeyGen's HTML→video engine for agents (Apache-2.0): scenes are HTML files driven by paused GSAP timelines, rendered frame by frame by its own CLI. Pick it for multi-scene films that benefit from its check audits, Studi |
| Lottie and dotLottie | Vector animation as JSON (Lottie) or zipped JSON + assets + state machines (.lottie). Players: dotlottie-web (ThorVG, canvas/WASM, recommended) and lottie-web (SVG/canvas, classic). Pick it for icons, illustrations and |
| Manim (Community Edition) | Python engine for mathematical and technical explainers: shapes, equations (LaTeX), graphs and transforms rendered to video. Pick Manim CE for maths, physics, algorithms and any "show the idea transform" explainer; add m |
| Motion (ex Framer Motion) | Declarative animation for React (motion/react), vanilla JS (motion) and Vue (motion-v): springs, layout animations, enter/exit presence, gestures and scroll. Pick it for component-level UI motion in apps and market |
| Remotion | React components rendered to video frame by frame: every visual is a function of useCurrentFrame(). Pick it for React teams, data-driven or templated videos, word-timed captions and the official templates. |
| Revideo and Motion Canvas | TypeScript scene graphs animated by generator functions (yield*). Motion Canvas is the editor-first original; Revideo (MIT fork by Midrender) adds a headless renderVideo() API, audio/video export and parallel renderi |
| Rive | Interactive vector animation authored in the Rive editor and played by small runtimes (web canvas/WebGL2, React, iOS, Android, Flutter, C++). State machines and data binding make animations react to inputs and data. Pick |
| Scroll animation: Lenis, ScrollTrigger, scroll-driven CSS, Scrollama | Scroll-linked motion for landing pages, product stories and data scrollytelling. Pick the lightest layer that works: CSS scroll timelines → Scrollama steps → GSAP ScrollTrigger; add Lenis only when native scroll feels wr |
| Shaders and procedural backgrounds | GPU fragment shaders for animated backgrounds, textures, logo effects and transitions: Paper Shaders (ready presets), tsl-textures (three.js TSL presets), noise libraries for custom GLSL, glslViewer for headless shader r |
| SVG animation | Vector shapes in the DOM: line drawing, shape morphs, logo reveals, icons, diagrams. Clean the file with svgo first, then animate with CSS/WAAPI or GSAP; flubber, MorphSVG or KUTE.js for morphs; SVG.js, Vivus or lazy-lin |
| three.js, WebGPU/TSL and react-three-fiber | The standard web 3D stack: three.js (WebGL or WebGPU renderer, TSL node shaders), react-three-fiber + drei + postprocessing for React, @pmndrs/vanilla (drei-vanilla) for plain HTML, three-gpu-pathtracer for offline pho |
Craft
| Guide | In one line |
|---|---|
| Anti-slop: AI motion and script tells | The patterns that make a video or page read as "made by AI", and what to do instead. Read before storyboarding and before every audit. |
| Composition and camera language | Frame sizes, safe areas, platform overlay zones, grids, and the shot and cut vocabulary to write storyboards with. |
| Directing by numbers: brief, clock, springs and the model itself | A precise model given a vague brief returns a precise default. This guide turns intentions into numbers, puts one clock in charge of every event, and says how to direct the agent so it finishes the film instead of stoppi |
| Motion grammar of premium launch films | What separates a launch film people share from a sequence of nicely animated slides. Rules adapted from echris6/motion-video-kit (MIT), whose author analysed 28 professional SaaS launch films and ran dozens of independen |
| Animation principles for motion design and UI | The 12 principles (Thomas and Johnston, *The Illusion of Life*, 1981) translated into rules Claude can apply and check, with timing tables and easing choices. |
| Text on screen | Titles, callouts, kinetic type and captions that can actually be read at the size and speed people watch: on a phone, often muted, often once. |
| Motion tokens | Every duration, easing and transition in a umd project comes from .motion/motion-tokens.json, written in the DTCG 2025.10 format. No hard-coded 300ms or ease-in-out in scene code (MOT). |
Audio
| Guide | In one line |
|---|---|
| Captions | Word-timed captions from a known script (forced alignment) or from audio (ASR), styled for reading, burned in or shipped as a sidecar. |
| Mix and loudness | Voice, music and SFX into one 48 kHz track at the destination's loudness. umd mix does the default job; this file explains the numbers and the manual route. |
| Music and sound effects | Music beds, stingers, UI sounds and SFX with a licence you can prove, plus beat markers to cut on. Pick generated music (ACE-Step 1.5) or a library track; never a track you cannot trace. |
| Sound design: from picture events to a finished soundtrack | How to give a motion piece its sound: what each kind of project needs, which sound goes on which picture event, where to get the files with a clean licence, and how to place, mix and check them. The detailed guides stay |
| Voice-over | Script → spoken track. Use a local, commercially licensed TTS. |
Practical
| Guide | In one line |
|---|---|
| Assets | Images, icons, logos, fonts, emojis, stock media and AI-processed assets, each with a recorded licence. Prefer assets built in code (SVG, CSS, shaders) over downloaded ones; when you download, record it. |
| Characters: where they come from, how to animate them | A character that acts badly ruins a good film faster than any other flaw. Characters drawn in code (primitives, hand-made SVG faces) often look stiff. This guide gives the agent real characters, free and usable in commer |
| Companion skills, plugins and MCP servers | Optional official or well-maintained add-ons that deepen one route. umd works without any of them. Install commands are copied from each project's README (checked 2026-11-10). |
| Licence policy | How umd classifies every dependency, model and asset, what each class means for a commercial deliverable, and how umd licenses and the install guard enforce .motion/project.json. This is engineering guidance, not leg |
| Platform export specs | What to render and encode for each destination. Figures checked 2026-11-10 from the sources listed; platforms change limits often, so re-check a limit that decides the brief (duration, file size). Loudness targets: `audi |
| Styles, prompts and references: start from proven work | The films people share as "agency level" rarely start from a blank page. They start from a proven style prompt (a look with named signature features, materials, colour logic and motion rules), get adapted to the brie |