Browse components
Flip Flow
Split-flap tiles that flip through their items like a flip clock, the top half falling over a hinge; stagger several to make a flipping stream.
Installation
npx shadcn@latest add @glint-ui/flip-flowFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/flip-flow.json
Usage
import { FlipFlow } from "@/components/ui/flip-flow";
{columns.map((items, i) => (
<FlipFlow key={i} items={items} delay={i * 160} />
))}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of nodes to cycle through; each fills the tile. |
| interval | number | 2600 | Ms between flips. |
| duration | number | 800 | Ms one flip takes. |
| radius | number | 16 | Corner radius in px. |
| paused | boolean | false | Stop cycling. |
| delay | number | 0 | Ms before the first flip; stagger it across tiles. |
| width | number | 180 | Tile width in px. |
| height | number | 240 | Tile height in px. |
| className | string | — | Extra classes for the root element. |