Routes et technos
Au kickoff, Claude choisit une route selon ce que tu fais. Chaque route a son guide pas à pas, chargé seulement quand il sert.
| Route | Pour | Moteurs |
|---|---|---|
html-video (par défaut) | Promo, présentation, explainer graphique, short, logo, typographie animée | HTML/CSS, GSAP, canvas rendus par umd capture ; HyperFrames ; Remotion ; Revideo |
threejs-film | Un personnage ou un objet dans un petit monde 3D | three.js ou WebGPU dans un seul fichier HTML, corrigé plan par plan |
blender | Matériaux réels, personnages riggés, rendus produit | Blender piloté en Python et par son serveur MCP, BlenderKit |
director | Histoire racontée, nombreuses scènes, images et voix générées | Claude réalise, d'autres modèles dessinent et parlent, sous un registre de licences strict |
explainer | Maths, schémas, code, terminal | Manim, Mermaid, D2, Code Hike, VHS |
web-page | Site, landing page, interface | GSAP, Motion, CSS, View Transitions, Lenis, registres shadcn animés |
S'y ajoutent :
- 15 recettes éprouvées : lancement produit, démo produit, vidéo de présentation, explainer, logo animé, typographie cinétique, short vertical, data story, section hero, transitions de page, scrollytelling, micro-interactions, court métrage narratif, série animée récurrente, et reproduire une animation de référence (analysée plan par plan) ;
- 17 guides de moteur, dont un tri de 60 librairies d'effets, de 3D, de physique, de son et de montage, avec leur licence et ce qu'il faut surveiller pour un rendu reproductible ;
- des guides de métier : grammaire des films de lancement, principes d'animation, tokens de mouvement, composition et zones sûres, texte à l'écran (et un texte qu'un inconnu comprend en 3 s), anti-« AI slop » ;
- des guides audio : sound design (quel son sur quel événement), voix commercialisables, musique et effets sonores, mixage, sous-titres ;
- des guides pratiques : assets, spécifications par plateforme, licences.
1 323 styles, prompts et blocs éprouvés servent de point de départ :
- 66 styles de films et les 98 styles OPUSCAR (un par film oscarisé) de lemo-opuscar ;
- 15 styles de motion design notés de mg-styles-15 ;
- 703 prompts de créateurs d'awesome-opus5-5-videos ;
- 441 blocs et composants prêts à l'emploi du registre HyperFrames.
Chaque entrée est classée par type de projet (promo, présentation, explainer, short vertical, logo, court métrage, page web, plan 3D), ambiance, rendu, format et niveau de qualité. Ton agent choisit lui-même dans la bibliothèque : avant de fixer un look, le storyboard lance umd styles match, qui classe toute la bibliothèque d'après ton brief, puis te montre les trois meilleures options, ou prend la première si tu lui laisses le choix. Pour choisir à l'œil : la Bibliothèque filtre tout par type de projet et par style, avec un aperçu de chaque résultat et son prompt à copier. Prompts prêts à copier et conseils : page Astuces et prompts.
Deux fichiers gardent la trace de la recherche :
- catalogue_motion_design_claude_codex_2026.md recense 1 113 dépôts GitHub vérifiés les 9 et 10 novembre 2026, avec des alertes de licence ;
- SOURCES.md liste tous les liens partagés, testés ou utilisés depuis le début du projet (315), avec ce qu'on en a fait et la raison de chaque écart.
Le rendu déterministe
umd capture ouvre ta page dans Chromium (par Playwright), sur un petit serveur local. Avant que le moindre script de la page tourne, il remplace par un temps virtuel :
- l'horloge (
Date,performance.now) ; requestAnimationFrameet les minuteurs ;Math.random, rendu reproductible par une graine.
À chaque image, il met en pause et place au bon instant toutes les animations CSS et Web Animations, ainsi que les éléments <video>. Les bibliothèques pilotées par requestAnimationFrame (GSAP, three.js, Lottie, p5…) avancent d'un pas par image. FFmpeg encode ensuite les captures. Tu peux aussi définir window.umdRender(t) pour tout contrôler toi-même. Vérifié sur une scène GSAP et three.js : deux rendus donnent des images identiques à l'octet près.
Tous les guides
Chaque guide est lu par Claude seulement quand il sert. Ils sont en anglais, la langue la plus économe en tokens.
Routes
| Guide | En une ligne |
|---|---|
| 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. |
Recettes
| Guide | En une ligne |
|---|---|
| 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 |
Moteurs
| Guide | En une ligne |
|---|---|
| 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 |
Métier
| Guide | En une ligne |
|---|---|
| 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 | En une ligne |
|---|---|
| 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. |
Pratique
| Guide | En une ligne |
|---|---|
| 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 |