All components
Line Chart Draw
DataA smoothed trend line draws on behind a travelling dot, filling a soft area as it goes, then annotates its own peak
Download preview768×432 preview render — the full-resolution file comes from running the component
5 seconds
Format
This is the format it was composed for. Switch above to see it lay itself out for another — same animation, re-arranged for the frame.
line chartdraw-onarea fillcounterannotationsvg path
For developers — source, dependencies and provenance
Dependencies
remotion@remotion/shapeszod
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Filesrc/registry/items/line-chart-draw.tsx
Frame1920×1080
Duration150f · 5s @ 30fps
Provenance
ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT
Prompt
A line chart that draws itself on: compute a smooth path from a values array, draw the stroke with evolvePath, wipe a soft area gradient in behind the leading edge, and carry a dot with a value label that counts up as it travels. Gridlines and axis labels first at hairline weight, then a small callout on the peak once the line lands.
