A glowing path that draws itself as visitors scroll. Each milestone lights up as the path reaches it, and its description reveals word by word. Add your own steps, drag them into position, and match the look to your brand with one accent color.
Full source code (.tsx), ready to paste
Framer remix link with the demo project
README with step-by-step setup
Free lifetime updates
Support within 24 hours
Content: milestones (label, description, X and Y position, text side above, below, left or right), up to 10 steps
Layout: path curve, dot size, halo size, dot-to-text gap, label-to-description gap, description max width
Colors: accent (path, dots and glow), background, track, idle dot, label text, description text, head dot
Typography: label font and description font, each with its own size, weight and line height
Path: stroke width, glow, dotted or solid track, track width
Interaction & Motion: wheel speed, dot pop scale, text reveal lead, idle label opacity, glowing head dot on or off, smooth spring-based progress
Remix or paste the code into Framer
Drag the component onto your canvas
Edit your milestones, positions, colors and fonts directly in the properties panel
Code component for Framer, not a standalone download
No external libraries to install
Scroll with the mouse wheel, trackpad or touch while over the component to draw the path. Once it is fully drawn or fully empty, the page scrolls on as normal
Interactive scrolling and text animation run in Preview and on the published site (canvas shows the finished timeline as a static view, so you can position everything)