Split Flap Board

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

Playground

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SplitFlapBoard/>

    </div>
  );
}

安裝

使用

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 換配色。

Props

可及性

• 使用者系統開啟「減少動態效果」時，翻牌動畫關閉，直接顯示最終字元
• 看板帶 role="img" 與 aria-label（完整訊息文字），個別翻牌格對輔助科技隱藏（aria-hidden）
• 字元表以偽隨機起翻延遲驅動波紋，取值由座標決定，避免 SSR 與客端 hydration 不一致