Motion Prompts · Data & Charts

Animated Bar Chart

Bars grow with labels and a highlighted winner.

⏱ 8 seconds

Live preview of the style and timing this prompt aims for. The real output is rendered by Remotion from your own brand values, so details will differ.

Build an animated horizontal bar chart from a data array (sample: 6 countries with values). Bars grow from zero with staggered springs, value labels count up in sync, and at the end the largest bar gets a highlight colour while the others dim. Include a title, subtitle, axis-free minimal design, rounded bar ends and a source footer prop. Font: Inter; palette: single accent [#2563EB] with greys.

Technical requirements: Use Remotion (React) in this folder. Create one composition at 1920x1080, 30 fps, 8 seconds. Put every brand-specific value (name, colours, text, font) in a single props object at the top so I can change them in one place and see it live in Remotion Studio. Use spring() and interpolate() with easing, no CSS keyframe animation. Keep it self-contained (no external assets unless I provide them). When finished, run `npx remotion render` to export an MP4 and tell me the output path.

How to use it

1. In an empty folder run npx create-video@latest and choose the blank template.
2. Open Claude Code there with claude and paste the prompt. Replace every [PLACEHOLDER].
3. Preview with npm run dev, then ask for tweaks in plain language.
4. Claude renders the MP4 with npx remotion render.

Tip: install the Motion brief skill to turn a rough idea into a storyboard and a ready-to-paste prompt.