Onboarding Steps

A horizontal onboarding flow. Circular nodes sit along a track, a gradient progress line fills between them, and each step activates in turn as the line reaches it, its icon popping in and a numbered badge appearing, while completed steps switch to a checkmark.

Each step is an entry in the STEPS array holding a title, a caption, and an SVG glyph path drawn on a 24 by 24 viewBox, which you can replace with your own icons. STEP_HOLD sets how long each stage takes to light up and NODE sets the circle size; the steps space themselves across the canvas width. The fill line uses interpolate() and the node pop-ins use spring(), so the flow is deterministic and finishes fully completed. Use it for product walkthroughs, how-it-works sections, and setup guides.