Feature sections
Feature - Scroll-pinned steps
Sticky section where step cards highlight progressively with scroll position.
- useScroll
- useTransform
- Sticky viewport
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
The section sticks to the viewport while the visitor keeps scrolling, and scroll progress through that pinned region is mapped onto the step cards so each one highlights in turn as you advance. Because the scroll position drives the transform directly, scrolling back up reverses the highlight smoothly.
When to use it
- Explaining a multi-step process, workflow, or onboarding flow in order
- A feature section where the sequence of steps is the story you want to tell
- A homepage moment where you want to hold the visitor's attention on one section
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 0.1-0.7
dimInactive step dim
Related components
Using this block
Buy it, then copy components/blocks/feature-pinned/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.