Future UI

Moving Bento

▧ Blocks

Self-rearranging image bento grid with a dominant center hero slot — peripheral items rotate into focus via GSAP Flip animations.

bentogridlayoutgsapanimationflipblock

No preview available

GSAP Flip ~ Self-rearranging organism grid

Controls

2000
10

Blocks / React Component

About Moving Bento

Self-rearranging image bento grid with a dominant center hero slot — peripheral items rotate into focus via GSAP Flip animations.

Category Blocks
Framework React + TypeScript
Dependencies gsap, @gsap/react
Tags bento, grid, layout, gsap, animation, flip, block

Install Moving 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/moving-bento.json?key=YOUR_LICENSE_KEY"

Usage example

import { MovingBento } from './MovingBento';

const items = [
  { id: '1', title: 'Code Editor', description: 'Build fast', image: '/img1.jpg' },
  { id: '2', title: 'Server Room', description: 'Scale up', image: '/img2.jpg' },
  { id: '3', title: 'Circuit Board', image: '/img3.jpg' },
  { id: '4', title: 'Analytics', image: '/img4.jpg' },
  { id: '5', title: 'Developer Setup', image: '/img5.jpg' },
  { id: '6', title: 'Global Network', image: '/img6.jpg' },
  { id: '7', title: 'AI & ML', image: '/img7.jpg' },
  { id: '8', title: 'Workspace', image: '/img8.jpg' },
];

export default function Example() {
  return <MovingBento items={items} swapInterval={3000} />;
}