Browse components
Split Flap Text
An airport departures board: every tile flips through the drum until it lands on the next word.
Installation
npx shadcn@latest add @glint-ui/split-flap-textFirst 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/split-flap-text.json
Usage
import { SplitFlapText } from "@/components/ui/split-flap-text";
<SplitFlapText words={["Departures", "Boarding", "On time"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["Departures","Boarding","Tokyo 08:45","On time"] | Words to cycle through. |
| interval | number | 4200 | Ms between words. |
| flipDuration | number | 55 | Ms for one flap to fall. |
| stagger | number | 40 | Ms between tiles starting. |
| align | "left" | "center" | "center" | Where shorter words sit. |
| tileColor | string | "#1b1b1f" | Flap background. |
| textColor | string | "#f5f5f0" | Character color. |
| className | string | — | Extra classes for the root element. |