Source
Flapkit repository and README
Read the primary source.
Reference illustration, not a screenshot of this source.
Flapkit
React component library · UI
Split-flap departure board for React: letters and digits flip over to their new value, with sound.
Use it for
Choose inside a React product when a short value must be seen changing, the way an airport board changes.
Choose something else for
Not a chart, a table or a general animation library, not for long text, and not for a house single-file page.
Give it
Short strings, one character per cell; A character deck, built in or your own; A motion adapter: cascade or riffle, CSS or Canvas
Get back
An animated split-flap board inside the page; Mechanical flip sound, optional
How it is operated
npm package flapkit, imported into a React 19 page. The structural stylesheet and one look are imported explicitly; nothing is injected at runtime.
Availability
Provider capabilities and historical Studio notes are distinguished below. Current account access, credits and runtime readiness were not tested.
How charging works
Free and MIT licensed. No account, no service, no per-use charge.
Where processing happens
Runs entirely in the reader's browser.
Language support
Any characters placed in a deck. The built-in decks are Latin letters, digits and punctuation; the demo also flips Chinese characters.
Put a moving display on a page
★★★☆☆ 3/5 for this task
The documented fit for its one job is strong, and the licence and browser test matrix are public. It is conditional here because it only runs inside a React 19 product; a house single-file page cannot use it, and nothing here has been built with it yet.
Decision: Use it in a React product where one figure or status should be seen changing. For a studio page, keep to CSS.
Limits and things to check
- React and React DOM 19 or later are required, the package is ESM, and its tooling needs Node 22.18 or later.
- The board needs JavaScript to appear, so it must never carry a fact the reader depends on.
- Every row repeats the first row's cell structure; another layout needs another board.
- The Canvas renderer restricts arbitrary CSS on the cells; use the CSS engine when the face needs them.
- Version 0.1.0, first published 31 August 2026. No Studio page or product uses it yet.
The only interface building block in the catalogue so far; it is compared against nothing yet.
Evidence
README and official documentation site read, live demo opened and captured on 17 September 2026. Not yet built into a page here.
Catalogue review: 2026-09-17. The evidence note identifies what was verified. This date does not imply a fresh tool test or verification of every linked source.
