Scroll-linked "How It Works" timeline — built in Framer for a healthcare client (Mira Health).

How it works:

— A vertical connector line fills as the user scrolls

— Numbered step circles switch from gray → filled dark teal when they're "reached"

— Each step's content card fades/slides in alongside its node Kept it to 3 steps on purpose

— "concern → consult → clear path forward." Anything more and the scroll distance gets long for not much payoff.

Used scroll-linked variants + overrides rather than a heavy interaction library — feels smoother and keeps the page lighter.

Scroll-linked "How It Works" timeline — built in Framer for a healthcare client (Mira Health).

How it works:

— A vertical connector line fills as the user scrolls

— Numbered step circles switch from gray → filled dark teal when they're "reached"

— Each step's content card fades/slides in alongside its node Kept it to 3 steps on purpose

— "concern → consult → clear path forward." Anything more and the scroll distance gets long for not much payoff.

Used scroll-linked variants + overrides rather than a heavy interaction library — feels smoother and keeps the page lighter.