Future UI

Particle Bento

▧ Blocks

Bento grid of image cards that dissolve into interactive particles on hover.

particlebentogridcanvashovergsapblock

No preview available

Canvas 2D + Bento Layout ~ Hover Each Card

Controls

4
60
5

Blocks / React Component

About Particle Bento

Bento grid of image cards that dissolve into interactive particles on hover.

Category Blocks
Framework React + TypeScript
Dependencies gsap
Tags particle, bento, grid, canvas, hover, gsap, block

Install Particle Bento in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/particle-bento.json?key=YOUR_LICENSE_KEY"

Usage example

// Requires: ParticleDispersion component (included)
import { ParticleBento } from './ParticleBento';

export default function Example() {
  return (
    <ParticleBento
      sampleGap={4}
      mouseRadius={60}
      force={5}
      cards={[
        {
          image: "/feature1.jpg",
          title: "Analytics",
          subtitle: "Real-time insights",
        },
        {
          image: "/feature2.jpg",
          title: "Dashboard",
          subtitle: "At a glance",
        },
      ]}
    />
  );
}