Chart Live Moves
Chart Live Moves is a data & metrics Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- Data & Metrics
- Duration
- 4–6s each
- Energy
- Medium-high (data is the story)
- Styles
- 3
Recipe notes
Three live-chart variants — oscilloscope-stream (the waveform writes in live at the right edge + a sudden spike), unit-dot-swarm-regroup (dots migrate in three acts to form digits), axis-rescale-shock (a new value bursts out of the frame, forcing the y-axis to rescale)
When to use it
Data-narrative segments; respectively telling "real-time", "every number is a person", and "growth that can't be contained"
Intent
Charts aren't illustrations, they're drama. All three variants share a premise (validated in testing): **a real chart context is required** — real axis labels, real data, real copy; grayscale placeholder bars can't measure the expressive power of a data narrative. A oscilloscope-stream: the waveform's writing point pins to the right edge, bobbing up and down while old data flows out to the left; midway, one sudden spike (amplitude 2.2×, the reading jumps up with a highlight color) — "real-time" isn't said aloud, and there's an event too. B unit-dot-swarm-regroup: 320 dots (each ≈40 customers) scatter → gather into three clusters (floating real Free/Pro/Enterprise labels) → line up into bars (real axis labels) → coalesce into a dot-matrix big number "12,847" — the same batch of dots, and the viewer can follow one of them as it rejoins its place. C axis-rescale-shock: the line climbs normally, a new value bursts through the chart's top edge and out of the card by 220px (a thick highlight line jabs into the title area), pauses half a beat, then the y-axis "whooshes" into a rescale (old ticks fly out / new ticks slide in / grid densifies / the old line squashes into a hori