Split-flap display for React
react-split-flap
A React component that recreates station and airport split-flap displays. Pure CSS transform animations keep hundreds of flaps turning smoothly at once.
IDEA
Keeping pata-pata on the web
Keikyu Kawasaki’s split-flap departure board retired in 2022, but the sound and rhythm of its mechanical motion remain captivating. react-split-flap recreates that feeling with CSS transforms: SplitFlap turns a string one character at a time, while LongFlap can turn an entire ReactNode—an image, icon, or a full layout—as one panel.
PLAYGROUND
Try typing
Type a few characters and watch each flap turn toward its target character.
ALWAYS LIVE
Flap clock
A live clock that turns once per second. When the tab is in the background, its animation clock falls back to a coarse timer; it still shows the correct time when the tab returns to the foreground.
ENGINEERING
Built for lots of flaps
01
Shared animation clock
Every flap subscribes to one requestAnimationFrame loop. Turns that expire in the same frame are merged into a single React commit, so hundreds of simultaneous flaps render only once.
02
No DOM reconstruction
Flaps remain mounted without changing keys, alternating between two CSS animation names to start directly from the first frame. There is no per-flap Web Animations API read/write cycle.
03
Minimal compositing layers
Only the moving top and bottom halves are promoted to GPU layers. In a scene of about 400 flaps, this cuts compositing layers by about 70% and GPU time by about 27%.
GET STARTED
Get started
TERMINAL
$ npm install react-split-flapREACT
import { SplitFlap, Presets } from 'react-split-flap'<SplitFlap value="HELLO" chars={Presets.ALPHANUM} />