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
