Feature sections
Feature - Bento grid
An asymmetric bento grid of feature tiles, each with its own entrance and hover lift.
- Bento layout
- Hover lift
- Staggered reveal
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
Feature tiles are arranged in an asymmetric bento grid of mixed sizes rather than a uniform row. Each tile reveals with its own staggered entrance as the section appears, and on hover a tile lifts slightly to signal it is interactive. The varied sizing lets you give marquee features more visual weight than minor ones.
When to use it
- A feature overview where some capabilities deserve more space than others
- A modern homepage that wants the popular bento layout for its feature grid
- A section that needs visual variety instead of identical repeated cards
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 3-8
countTile count - 0-0.3s
staggerStagger delay
Related components
Using this block
Buy it, then copy components/blocks/feature-bento/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.