animation examples
Data & Metrics Animation Examples
Data and metrics shots visualize numbers: counters, charts, gauges, dashboards, and live readouts. 11 shots with video previews and agent-ready Remotion code below.
Avatar Grid Radial Build ColorizeAn 8×7 grid of small cards grows ring by ring from the center to fill the screen (content mixes initials / icon / image placeholders), then ~15% of the cards turn red at random moments to flag anomalies, with the title and legend staying put in the center
~5.6s (168f @ 30fps; fill 0.5–1.7s · coloring emerges 1.7–3.4s)
Before After Slider ScrubBefore/after comparison slider — the "before/after" versions stack on top of each other; the divider handle first whips across, then slowly sweeps back, revealing the new version like a photo developing under the bar
4–5s
Chart Live MovesThree 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)
4–6s each
Counter ConfettiA big number sprints up the count with easeOutQuart plus a scale overshoot; one beat before landing, 52 confetti pieces blast in on parabolas from both sides; an impact ring expands and the label's letter-spacing tightens to close
~4.6s (138f @ 30fps; counting 0.3–2.6s · confetti from 2.4s · settled 3.3s)
Gauge Readout MovesTwo gauge-reading variants — needle-sweep-selftest (ignition self-check: the needle whips across the full arc, then settles back to the true value) and tape-scroll-fixed-pointer (the needle stays put while the tick-marked tape scrolls past, with a sprint-and-brake)
A 4–5s / B 4–5s
Hatch DepthHatch-pattern placeholder bars wipe-stretch into place one by one; then the hatching fades out, an accent-colored solid layer fades in, values pop up, and the placeholder graphic transforms into a real data bar chart
~4.4s (132f @ 30fps; growth 0–1.7s · transformation 2.2–3.4s · micro-tremor ending)
Odometer Digit RollOdometer-style rolling number in giant type — each digit of a full-screen hero metric spins vertically like a slot-machine reel with motion trails, locking in place one by one left to right with an overshoot; the instant all digits lock, the whole number deepens in a pulse
rolling + digit-by-digit lock ~63f + pulse 8f + hold ≥45f, ~5s
Particle Celebrate HitsTwo celebration-particle variants — confetti-crossfire (twin cannons fire crossing confetti barrages on the milestone-reveal frame) and counter-tick-sparks (the counter bursts sparks at its top each time it crosses a full thousand)
A 3–4s / B 4–5s
Particle Sand FillParticles rain into a funnel to build bars — the bar chart doesn't grow, it "gets rained into existence": square particles fall one by one and pile into bars; when full, they solidify into a solid bar and the value pops in
4–5s
Scroll Brake MovesTwo long-scroll hard-brake variants — changelog-scroll-brake (the basic version: a high-speed long scroll decelerates exponentially to an exact stop + the target row lifts) and brake-reticle-lock (the combo version: reticles bite onto the stop point on the exact same frame as the brake)
A 4–5s / B 5s
Timeline TravelHorizontal timeline travel — the camera accelerates along the horizontal tick axis past version ticks; as it passes each tick a card springs upright in a brief pause, and the final tick ends in a hard stop that pushes in close
4–5s