Split Flap Board

Vestaboard 式機械分裂翻牌字元切換，逐格滾動落定，支援多則訊息輪播。

機場／車站看板的機械翻牌效果。每格從當前字元沿字元表一格一格向前翻，翻牌數不同讓各格錯落停定，形成經典的機械揭示波紋。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

看板文字text

翻牌高度（px）size

單次翻牌時長（ms）flipDuration

逐欄起翻延遲（ms）stagger

翻牌底色background

字元顏色color

<SplitFlapBoard />

npx shadcn@latest add https://webberui.com/r/split-flap-board.json

或在 components.json 設定 registries 後，改用 @webberui/split-flap-board 安裝。

安裝依賴後，從 registry JSON（/r/split-flap-board.json 的 files[0].content）複製 split-flap-board.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

import { SplitFlapBoard } from "@/components/ui/split-flap-board";

<SplitFlapBoard text="ON TIME" />

多則訊息會依 interval 自動輪播：

<SplitFlapBoard
  messages={["DEPARTURES", "NOW BOARDING", "GATE A12"]}
  interval={2600}
  cols={12}
/>

以 \n 換行可排出多列看板，並用 background 與 color 換配色。