Showing Stat Count-up with sample copy. Describe your video above, or browse all templates.
Your prompts
Paste into Claude Code. It sets up skills and hooks, then builds this exact animation.
Build a 5.0s motion-graphics video: Numbers count up and grow with their value, with bars that fill underneath. For results and milestones.
## Skills
- Use the `remotion-best-practices` skill for all composition code. If this project uses HyperFrames instead of Remotion, use `/hyperframes` with `hyperframes-animation` and keep the same beats.
- Use the `motion-graphics` skill (if installed) for motion direction and polish.
- If there is no Remotion project yet, scaffold one first with the `remotion-create` workflow, then open Studio so I can watch the preview while you build.
## Hooks (set up first)
Merge this into `.claude/settings.json` so every edit is type-checked and every finished turn renders a verification still:
```json
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write|MultiEdit",
"hooks": [
{
"type": "command",
"command": "npx tsc --noEmit -p . 2>&1 | head -30"
}
]
}
],
"Stop": [
{
"hooks": [
{
"type": "command",
"command": "npx remotion still StatCountUp out/StatCountUp-check.png --frame=105 2>&1 | tail -5"
}
]
}
]
}
}
```
## Composition
- id `StatCountUp`, 1080x1920 (9:16), 30 fps, 150 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
"headline": "Our first year, in numbers",
"stats": [
{
"value": 12480,
"decimals": 0,
"prefix": "",
"suffix": "",
"label": "orders shipped"
},
{
"value": 4.8,
"decimals": 1,
"prefix": "",
"suffix": "/5",
"label": "average review"
},
{
"value": 37,
"decimals": 0,
"prefix": "",
"suffix": "%",
"label": "repeat customers"
}
],
"footnote": "Example figures. Replace with your own."
}
```
## Look
- Colours: background #EAFBF4, surface #C6F0DD, text #0F2A20, single accent #0E9F6E. Use only these.
- Typeface: Geist (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: data motion graphic, large tabular numbers counting up rapidly with scale growing as the value rises, horizontal bars filling underneath, staggered stats arriving as one chord, flat pastel background, clean sans typography, no camera movement.
## Beats
- 0.0s: headline "Our first year, in numbers" springs in softly from 40px below.
- 0.3s: stat 1 counts from 0 to 12480 over 1.4s (ease-out, tabular numerals, 0 decimals) while its scale grows with the value; label "orders shipped" fades in; a bar underneath fills to its share of the largest value. This hero stat is larger and in the accent colour.
- 0.6s: stat 2 counts from 0 to 4.8/5 over 1.4s (ease-out, tabular numerals, 1 decimals) while its scale grows with the value; label "average review" fades in; a bar underneath fills to its share of the largest value.
- 0.9s: stat 3 counts from 0 to 37% over 1.4s (ease-out, tabular numerals, 0 decimals) while its scale grows with the value; label "repeat customers" fades in; a bar underneath fills to its share of the largest value.
- 2.7s: footnote "Example figures. Replace with your own." fades in, small and muted.
## Rules
- Drive every animation from `useCurrentFrame()` with `interpolate()`/`spring()` and clamped extrapolation. No CSS transitions or Tailwind animation classes.
- Deterministic only: no `Math.random()` or `Date.now()`; use `random(seed)` from remotion.
- Animate transforms and opacity only (`scale`, `translate`, `rotate`); never linear easing for movement.
- Keep key content inside the platform safe area (on 9:16 leave about 220px top and 420px bottom clear). Size display text so the longest word never overflows.
- One accent colour. Strong contrast for all text. No em dashes in on-screen copy.
## Done when
- Studio plays the full 5.0s without errors, and the Stop hook still renders cleanly.
- You have rendered stills at frames 0, 52, 105 and 149 and checked each for overflow, clipped text and contrast.
- Do not render the final MP4 unless I ask.