A white creative-tool bento that glides between three arrangements of the same six tiles. Each tile adapts its content to its new size, and view buttons with a progress line let people pick or pause the layout.
Glasswing for brand teams
Artwork, palette, type and exports live on one canvas. Switch views and every tile finds its new place.
We shipped the whole fall campaign from one board, without a single handoff file.Rosa Vidal, Brand Lead at Fernwood
3 editing now
npx shadcn@latest add https://hyperblur.dev/r/bento-shuffle.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-shuffle.tsx.
import { BentoShuffle } from "@/components/hyperblur/bento-shuffle"
<BentoShuffle interval={3600} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Glasswing for brand teams" | Label above the heading. |
| title | string | "A board that rearranges itself around the work" | Section heading. |
| subtitle | string | "Artwork, palette, type and exports..." | Paragraph under the heading. |
| autoPlay | boolean | true | Move to the next layout when the progress line fills. Hovering the board pauses it. |
| interval | number | 3600 | Milliseconds per layout. |
| layout | number | Controlled layout index, 0 to 2. | |
| onLayoutChange | (index: number) => void | Called when the layout changes. | |
| accent | string | "#6d28d9" | Accent for labels and highlighted chips. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |