chart-live-moves
Shot recipes · A number or a chart · Apache-2.0
- What it does
3 named moves on one card: oscilloscope-stream (A live curve writes itself in at the right edge with sudden spikes, then brakes to a true standstill); unit-dot-swarm-regroup (A dot swarm migrates in three staggered spring acts and finally regroups into a number); axis-rescale-shock (A new value bursts 220px out of the chart frame, forcing the axis to rescale: ticks swap, the grid densifies, the old line flattens).
- Get it
Copy demos/data/chart-live-moves/AxisRescaleShockV2.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id="AxisRescaleShockV2" component={AxisRescaleShockV2} durationInFrames={AXIS_RESCALE_SHOCK_V2_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: "use the chart-live-moves shot card". Read the card first: references/shots/data/chart-live-moves.md.
- Needs (the whole pack)
Remotion 4 and React 19, and FFmpeg for its checks. No Tailwind, no CSS files, no web fonts.
- Re-skin
Edit the file (colors, logo, text)
No props (3 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight, LOOKS.porcelain, LOOKS.sand), but about 7 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx,…
- License
Apache-2.0
- From