Motion Prompts · Data & Charts

Line Chart with Callouts

A trend line draws itself and pins annotated moments.

⏱ 9 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.

Create an animated line chart: data points (sample: 24 monthly values) are drawn with a path draw-on across 4 seconds, with a soft gradient area fill beneath that follows the line. At 3 key data points, a dot pulses and a callout card pops with a leader line and text (props: index, title, note). Gridlines faint; axes labels fade in first. Provide a clean light theme [#FFFFFF] with accent [#16A34A].

Technical requirements: Use Remotion (React) in this folder. Create one composition at 1920x1080, 30 fps, 9 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.