Path Steps lays your process out as a snaking sequence of cards and draws a connector line between them as the visitor scrolls.
The connector is not a static graphic. The component measures the cards after layout and generates the path from their real positions, so it stays correct at any step count, any column count and any card height. Change the gap, add a step, edit a title, or resize the browser and the line regenerates to match. This is the part that is genuinely tedious to build by hand in Framer, where an absolutely positioned SVG has to be re-drawn for every breakpoint.
Responsive behaviour is measured on the component, not the viewport, so the section is also correct when it sits inside a narrow stack on a wide screen. Above the tablet threshold it uses your chosen column count, up to four. Below it, two. Below the mobile threshold, the layout stacks and the same connector collapses into a single vertical line. Both thresholds are yours to set.
Each step takes a title, body text, an optional icon, an optional link, and an auto-numbered badge you can override. Cards are fully styled from the panel: fill, border, radius, shadow, padding, minimum height, alignment, extended font controls for headings and body, and an optional line clamp. The rail has its own controls for colour, track colour and fade, width, corner radius, line cap and a dashed track. Motion controls cover the scroll window the drawing spans, the per-card reveal span and offset, and the hover lift, each of which can be switched off.
The component uses ordered-list semantics with real headings, so screen readers announce step order. Nothing depends on hover. On the Framer canvas, during export, and for visitors who prefer reduced motion, the section renders in its finished state with the path fully drawn and every card visible.
No dependencies, no WebGL, no network calls. Scrolling triggers no React re-renders.
Path Steps lays your process out as a snaking sequence of cards and draws a connector line between them as the visitor scrolls.
The connector is not a static graphic. The component measures the cards after layout and generates the path from their real positions, so it stays correct at any step count, any column count and any card height. Change the gap, add a step, edit a title, or resize the browser and the line regenerates to match. This is the part that is genuinely tedious to build by hand in Framer, where an absolutely positioned SVG has to be re-drawn for every breakpoint.
Responsive behaviour is measured on the component, not the viewport, so the section is also correct when it sits inside a narrow stack on a wide screen. Above the tablet threshold it uses your chosen column count, up to four. Below it, two. Below the mobile threshold, the layout stacks and the same connector collapses into a single vertical line. Both thresholds are yours to set.
Each step takes a title, body text, an optional icon, an optional link, and an auto-numbered badge you can override. Cards are fully styled from the panel: fill, border, radius, shadow, padding, minimum height, alignment, extended font controls for headings and body, and an optional line clamp. The rail has its own controls for colour, track colour and fade, width, corner radius, line cap and a dashed track. Motion controls cover the scroll window the drawing spans, the per-card reveal span and offset, and the hover lift, each of which can be switched off.
The component uses ordered-list semantics with real headings, so screen readers announce step order. Nothing depends on hover. On the Framer canvas, during export, and for visitors who prefer reduced motion, the section renders in its finished state with the path fully drawn and every card visible.
No dependencies, no WebGL, no network calls. Scrolling triggers no React re-renders.
Artem Kireev
