Animated Bento Grid — React Component

Feature showcase bento grid with entrance animations and configurable column spans. Each tile supports custom content, tags, and motion entrance delays.

Bento Gridsscrollspringbentogridfeaturesshowcaseframer-motionlayout

Animated Bento Grid

Animation effects

scrollspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Animated Bento Grid

The Animated Bento Grid is a configurable feature showcase grid where each tile enters the viewport with a staggered Framer Motion spring animation. Column spans are configurable per tile, allowing the alternating wide/narrow pattern that creates diagonal visual movement through the section. Each tile accepts a custom icon, heading, description, tags, and motion delay. The bento grid layout packs multiple product capabilities into a single view without requiring visitors to scroll a long feature list.

Common use cases

  • Product feature showcase sections
  • Platform capability grids
  • SaaS landing page feature sections
  • Service and offering displays