Split-flap display for React
重現車站與機場翻頁顯示器的 React 元件。純 CSS transform 翻頁動畫，幾百格同時翻動也能保持流暢。
IDEA
京急川崎駅的翻頁式發車標在 2022 年退役，機械翻頁的聲音與節奏卻一直很迷人。react-split-flap 用 CSS transform 重現這種質感：SplitFlap 逐字翻動字串，LongFlap 則能翻整塊 ReactNode——圖片、圖示、整段排版都可以當成一片字盤。
PLAYGROUND
打幾個字試試，看看字盤是如何逐格翻到目標字元的。
ALWAYS LIVE
每秒翻動一次的即時時鐘。分頁切到背景時，動畫時鐘會退回粗粒度計時器，回到前景時字盤仍然停在正確的時刻。
ENGINEERING
01
所有翻頁格訂閱同一個 requestAnimationFrame 迴圈，同一幀到期的翻動合併成一次 React commit，幾百格同時翻也只有一次 render。
02
翻頁動畫透過 Web Animations API 重新啟動，翻頁格保持掛載、不換 key，消除每次翻動的節點汰換。
03
只有正在翻動的上下兩片會提升為 GPU 圖層。約 400 格的場景中合成層減少約 70%、GPU 時間減少約 27%。
GET STARTED
TERMINAL
$ npm install react-split-flapREACT
import { SplitFlap, Presets } from 'react-split-flap'<SplitFlap value="HELLO" chars={Presets.ALPHANUM} />