Five clear branches from a central question — identify the type of motion and the right library appears.
🗺️ The complete matrix of the 5 libraries
Each library has a clear winning zone. Using the right one means quick results; using the wrong one means fighting the tool as you iterate. The matrix below is the definitive guide.
| Library | Best for | Typical example | When NOT to use it |
|---|---|---|---|
| GSAP | Structured timeline, fixed choreography | SaaS intro, launch video, text sequence | Reactive / physics-based movement (use Framer) |
| D3 | Data that becomes an animated story | Bar chart race, heat map, timeline | Animations without data (GSAP is simpler) |
| Three.js | 3D scenes rendered as frames | Product rotation, flythrough, 3D explainer | Simple 2D animations (overkill) |
| Lottie | Lightweight, fast micro-animations | Social clip, onboarding, brand icon | Complex or data-heavy scenes (use GSAP / D3) |
| Framer Motion | Reactive, physics-based, spring movement | Interactive UI, page transitions, drag | Fixed video timeline (use GSAP) |
🎞️ GSAP — when choreography is the message
GSAP is the choice for any video where sequence matters: text that enters the scene, elements revealed in sequence, choreography fixed on the timeline. SaaS intros, launch videos, product presentations.
GSAP over Framer for fixed choreography
Framer Motion is great for reactive motion (the user interacts, the UI responds). But in rendered video, the timeline is fixed — GSAP maps directly to that. Framer adds a physics abstraction layer that doesn’t make sense without interaction.
Framer for responsive, physics-based motion
When the video simulates an interactive UI (drag, spring, inertia), Framer provides real physics. It's the only case where Framer beats GSAP inside Remotion.
📊 D3 and Three.js — Domain Specialists
D3 and Three.js are specialists: each solves a very specific problem better than any other library. Outside that domain, they’re overengineering.
📊 D3 — data becomes animation
Feed in the data, describe the chart, and Claude renders it. D3 is the only library where the data and animation live in the same model—you don’t need to convert, map, or sync them manually.
- ✓Bar chart race with real data
- ✓Interactive timeline (in the video)
- ✓Heatmap with transition
🧊 Three.js — real perspective
For anything that requires three-dimensional depth, lighting, and a camera — Three.js is the only way. Vanilla for simple projects; R3F when you need composition in components.
- ✓3D product rotation
- ✓Environment flythrough
- ✓3D explainer animation
💡 Rule for choosing between D3 and Three.js
Have data? Use D3. Have a z-axis? Use Three.js. If you're thinking, "would it work here?", it probably would—but if you had to think about it, GSAP might be simpler for the job.
✨ Lottie — speed above all
Lottie is the choice when speed matters more than complexity. Micro-content, social clips, onboarding—the fastest path from prompt to a production-ready output. The library Claude gets right on the first try most often.
Clean motion and a perfect loop. The kind that works on Reels without looking software-made.
Illustrations that move to guide the user. Lightweight, fast-loading, and the mobile industry standard.
Animated icons, loading screens, confirmations. Small touches that bring the identity to life.
🔷 When Lottie falls short
Animations with structured data (use D3), long choreographies (use GSAP), or 3D scenes (use Three.js). Outside these exceptions, if you're choosing between Lottie and GSAP for something simple, choose Lottie — it's faster.
🔮 The 4 Universal Rules
Regardless of which library you choose, four rules always apply. These are the principles that make Claude Code + Remotion work well with any library.
Install the skill before anything else
The 28 Remotion rule files in Claude’s context are what ensure the generated code is correct for video rendering. Without the skill, Claude generates browser code—not rendering code.
Start with the simplest version
Any scene works with fewer elements than you think. A cube before a full scene; a chart before a dashboard. Simple things can be delivered in one prompt; complex ones need several.
Iterate in the same session
The scene context stays with Claude for as long as the session lasts. Color, speed, geometry, or layout adjustments are follow-up prompts—not new prompts from scratch.
Render with the right settings
FPS, resolution, and codec affect the final quality. Before rendering, confirm the settings for remotion.config.ts — the skill guides you to the right values.
🚀 Track 2 complete — what comes next
You now have the complete map of the libraries and the universal rules. The Track 3 — Projects put all of this into practice: complete end-to-end projects with each library, from prompt to final MP4.
✗ What doesn't work without the map
- ✗Choosing the library based on familiarity, not the type of motion.
- ✗Use GSAP for everything — it works, but adds unnecessary complexity.
- ✗Trying to use data with Three.js—D3 is the right tool.
✓ With the map in mind
- ✓The first prompt already uses the right library — fewer iterations.
- ✓Faster production-ready output.
- ✓Claude generates more reliable code when the library is the right one for the problem.
🎯 In Track 3, you will
- →Build a SaaS intro video from scratch with GSAP.
- →Create a bar chart race with D3 from real data.
- →Render a 3D product scene with Three.js.
- →Compose a complete social clip with Lottie.
📌 Track 2 Summary
Next track:
Track 3 — Projects: end-to-end projects with each library, from prompt to MP4.