Signal Bento Grid — React Component

Animated bento tiles with breathing gradients for product metrics.

Bento Gridsscrollgradientdashboardmetrics

Signal Bento Grid

Animation effects

scrollgradient

Copy-paste ready

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

About Signal Bento Grid

The Signal Bento Grid renders animated bento tiles with breathing gradient backgrounds tuned for product metric and capability displays. Each tile has an independently animated gradient that shifts slowly, creating a living dashboard feel without per-frame JavaScript. Tiles animate into view on scroll using Framer Motion whileInView with staggered delays. The responsive CSS grid layout adapts from single-column on mobile to a multi-column bento arrangement on desktop, and each tile accepts custom content, icons, and labels.

Common use cases

  • Product capability showcases
  • Platform feature sections
  • Dashboard and metrics preview sections
  • SaaS landing page feature grids