Feature sections
Feature grid - Stagger
Feature cards that fade and lift in with a staggered delay as they enter the viewport.
- whileInView
- Stagger delays
- Once-only
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
Each feature card starts hidden and slightly lowered, and a viewport hook fires its animation the moment the card scrolls into view, fading it in and lifting it to its resting position. The cards share a staggered delay so they cascade in sequence rather than all at once, and the animation runs only once so revisiting the section stays calm.
When to use it
- A feature section that should feel lively as the visitor scrolls down the page
- A homepage where you want each benefit to land one at a time for emphasis
- Any grid of cards that would feel flat if it simply appeared all at once
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 0-0.3s
staggerStagger delay - 0-48px
liftEntrance lift
Related components
Using this block
Buy it, then copy components/blocks/feature-stagger-scroll/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.