npm package
パタパタ
A small library for split-flap displays on the web — the airport departure board, the Solari di Udine, the Vestaboard, recreated in the browser. The point is the wait: ptpt keeps the analog ticking on purpose.
<PatapataBoard targets="PATAPATA" />
Why
Why split-flap
A split-flap board doesn't just show a value — it arrives at one. The flaps tick through every glyph in between, and the wait is the whole experience. ptpt treats that delay as a feature, not a cost: text and images flip through the same Frame vocabulary, a Cell is one flapping unit, and a Board staggers a row of them so the whole display ripples like the real thing. A framework-agnostic core, with paper-thin wrappers on top.
Departures
Five packages
At the center is @love-rox/ptpt-core, a framework-agnostic, zero-dependency engine (~3 KB gzip, ESM, ships its own styles.css). Pick whichever adapter (or adapters) suits your stack — core is pulled in automatically as a dependency.
core
@love-rox/ptpt-core · v0.1.1
Framework-agnostic engine
The engine — createCell, createBoard, frames, presets, and delays. Zero dependencies, ESM, ~3 KB gzip, with pure functions like computeFlipPath exported for the curious. Every adapter is built on this.
react
@love-rox/ptpt-react · v0.1.1
React components
<Patapata>, <PatapataBoard>, and the useFlipCell hook. Client components ("use client"), so they slot into RSC setups like Waku and Next.js.
vue
@love-rox/ptpt-vue · v0.1.1
Vue 3 components
The same <Patapata> / <PatapataBoard> API for Vue 3, plus a useFlipCell composable — identical options, identical behavior.
rehype
@love-rox/ptpt-rehype · v0.1.1
rehype plugin
Turns marked Markdown / HTML into split-flap boards. Emits readable text with data-ptpt-* at build time, then a hydrate helper animates it — no JS, still readable.
astro
@love-rox/ptpt-astro · v0.1.1
Astro integration + components
Wires up the Markdown plugin, injects the stylesheet, and runs the hydrator for you. Ships Patapata.astro and PatapataBoard.astro to drop a board straight into a template.
Stylesheet
One stylesheet everywhere
Import @love-rox/ptpt-core/styles.css once and every board gets a working dark split-flap look. Everything is themeable through custom properties on .ptpt-cell — width, height, flap duration, colors — or go fully headless and target the classes yourself.
@import "@love-rox/ptpt-core/styles.css";Behaviour
What's true across the board
- Frames are the flaps — text, image, or
element— each addressed by aslug; a bare string is normalized to a text frame. - A
Boardis onerole="status"live region: cells arearia-hidden, and only the settled result is announced to screen readers. prefers-reduced-motionis honored automatically —reducedMotion: 'instant'snaps to the target without animating.- Presets and delay functions ship as tree-shakable subpaths, so adding more never grows your bundle.
- Pass a
PresetDefinitionobject to a preset, not a bare string — a string is read as literal flap characters, not a preset name.
Browser support
Browser support
The flip is built from transform: rotateX() and a moving box-shadow on three stacked half-cells — standard CSS supported across all modern browsers. No 3D libraries, no canvas, no dependencies.
Versioning
Shared version line
All five packages release on the same shared version line, anchored to @love-rox/ptpt-core. Whenever any one of them changes, the others move to the same number — so you never have to wonder whether react@0.2.5 is compatible with core@0.3.0.
License
License
MIT License. Free to use in personal and commercial projects.
final call · boarding
See it in action
The interactive demo lets you pick a preset and a flip mode, then watch a row of cells ripple to the next destination — just like a real departure board.