Reading up on Remotion

How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1<br/>read-only] t2[Tier 2<br/>in-project writes] t3[Tier 3<br/>everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into @mattpocockuk `/grill-with-docs` and

@delba_oliveira

Lots of people asked how I used Fable to edit its own launch video so I made a video about that! TLDR it wrote a lot of code & tool calls to use transcription services, ffmpeg, do colorgrading, use the figma mcp, make remotion UI and render it. I didn't touch a video editor.

@trq212

For making agentic videos - I did a deep dive into @HyperFrames_ vs. @Remotion using @slashlast30days. Of course I had to make a video to go with the article! Take a look at both products. Which are you using?

@mvanhorn

Remotion Was My First Agentic Video Love. Then HyperFrames Stole Me. /last30days for both

@mvanhorn

Ok, now we're cooking. Claude 🤝 Remotion

@delba_oliveira

Remotion now has Agent Skills - make videos just with Claude Code!$ npx skills add remotion-dev/skillsThis animation was created just by prompting 👇 pic.twitter.com/hadnkHlG6E

@Remotion