React 用パタパタ表示器
react-split-flap
駅や空港のパタパタ表示器を再現する React コンポーネント。純粋な CSS transform によるめくりアニメーションで、数百のパネルを同時に滑らかに動かせます。
IDEA
パタパタをウェブに残す
京急川崎駅のパタパタ式発車標は 2022 年に引退しましたが、機械式の音とリズムは今も魅力的です。react-split-flap は CSS transform でその質感を再現します。SplitFlap は文字列を一文字ずつ、LongFlap は ReactNode 全体を一枚のパネルとしてめくれます。
PLAYGROUND
入力してみる
文字を入力して、パネルが目標の文字へ一枚ずつめくれる様子を見てみましょう。
ALWAYS LIVE
フラップ時計
毎秒一度めくれるリアルタイム時計。タブがバックグラウンドになると粗いタイマーへ戻り、前面に復帰しても正しい時刻を表示します。
ENGINEERING
大量のパネルのために
01
共有アニメーション時計
すべてのパネルが同じ requestAnimationFrame ループを購読し、同じフレームで期限を迎える動きを一度の React commit にまとめます。数百枚が同時にめくれても render は一度だけです。
02
DOM を再構築しない
パネルは mounted のまま key を変えず、二組の CSS animation name を交互に使って先頭フレームから開始します。Web Animations API を一枚ずつ読み書きする必要はありません。
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} />