# Explainer and data animation system

When to use it: Animated charts and number explainers made with Claude Motion, Remotion or After Effects, where clarity and honest numbers matter more than flash.

Works with: [Remotion Agent Skills (official)](https://agentcut.dev/tools/remotion-agent-skills-official/), [Remotion MCP App](https://agentcut.dev/tools/remotion-mcp-app/), [HyperFrames (HeyGen)](https://agentcut.dev/tools/hyperframes-heygen/), [After Effects MCP (Engine Room)](https://agentcut.dev/tools/after-effects-mcp-engine-room/)

Save as: brand/EXPLAINER.md

Download: https://agentcut.dev/prompts/md/ds-explainer-data.md

~~~~markdown
# EXPLAINER.md: Explainer and data animation system

## Principles
- One idea per scene. One chart per scene.
- Every number on screen comes from the source file. If a number is missing, show [placeholder], never invent it.
- Show the source on screen, small, bottom right, whenever a number appears.

## Scene timing
- Each scene: 4 to 8 seconds. Build 1 to 1.5 s, hold at least 2 s, exit 0.5 s.
- Numbers count up over 1 s with ease out, then hold the final value.
- Narration leads, animation follows: the visual appears on the word, not before.

## Charts
- Bar charts start at zero. Always.
- Max 6 bars or 4 lines per chart. Group the rest as "Other".
- Highlight one data point in the accent color, everything else in muted gray.
- Labels directly on the bars or line ends, no legends when possible.
- Axis labels and units always visible. Round to what matters (18%, not 18.27%).
- Bars grow from the baseline with a 3 frame stagger, left to right.

## Type and color
- Use the motion brand system (DESIGN.md) for fonts, colors and easing.
- Numbers use tabular figures so they do not jitter while counting.
- Big number scenes: number at t-hero size, label under it at t-body.

## Structure for a 30 to 60 s explainer
1. Hook: the single most surprising number or claim.
2. Context: what we are measuring and since when.
3. Three beats: one chart or diagram each.
4. Takeaway: one sentence, held still for a voiceover.

## Never
- 3D pie charts, dual axes, truncated axes, animated gridlines that distract.
- Stock icons for every word. Use an icon only when it explains faster than text.
~~~~

Sources and credit:

* [Remotion Agent Skills (remotion-dev/skills)](https://github.com/remotion-dev/skills): Includes a charts rule for Remotion; use it for the implementation details

---
AgentCut: https://agentcut.dev/ · All tools as JSON: https://agentcut.dev/tools.json · Overview for agents: https://agentcut.dev/llms.txt