Start with Cube. Match its inputs and operating requirements to your job.
JavaScript animation library
Cube
★★★★☆ 4/5 for this task
It runs on a house single-file page with one import and no build step, its reduced-motion handling is real, and its fixed timings match the calm motion the house rules ask for. One star held back: a week old, one author, and reveal hides content from captures and print.
Give it
The elements to move, by selector or node; Optional: animate the children one after another
Get back
Entrance, exit, state-change and on-scroll motion inside the page
How it runs
One import from the npm package cube-motion, or from jsDelivr on a plain HTML page (6.4 KB module). Adapters for React, Vue, Solid and Svelte. Built on the browser's Web Animations API, no dependencies.
Processing location
Runs entirely in the reader's browser.
Charging model
Free and MIT licensed. No account, no service, no per-use charge.
Choose it when
Use rise for a page's first view and morph for a button or status that changes. Use reveal sparingly and never on a block that carries a fact.
Watch for
reveal keeps a block invisible until it is scrolled into view, so a full-page capture, a PDF print or a reader without JavaScript can meet an empty section. Use rise and morph freely; put reveal only on blocks that carry no fact the reader depends on.; Version 0.1.0, first published on npm on 18 September 2026, one author. Pin the version when loading it from the CDN.; Loading from jsDelivr is an outside request; a studio page should keep a local copy of the module (MIT allows it).; The four motions cannot be retimed. That is the point of the library, and also its limit.
Start with Flapkit. Match its inputs and operating requirements to your job.
React component library
Flapkit
★★★☆☆ 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.
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 runs
npm package flapkit, imported into a React 19 page. The structural stylesheet and one look are imported explicitly; nothing is injected at runtime.
Processing location
Runs entirely in the reader's browser.
Charging model
Free and MIT licensed. No account, no service, no per-use charge.
Choose it when
Use it in a React product where one figure or status should be seen changing. For a studio page, keep to CSS.
Watch for
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.
Start with 21st. Match its inputs and operating requirements to your job.
Interface component library
21st
★★★☆☆ 3/5 for this task
Large, well-made catalogue that stops Claude inventing fake-looking buttons, but tied to React and Tailwind, while Studio and eR pages use their own design system.
Give it
A description of the component you need
Get back
React and Tailwind component code
How it runs
Website, command line and a Claude Code plugin that adds the 21st connector.
Processing location
Hosted catalogue; the code you copy runs wherever you put it.
Charging model
Free to browse and copy; connector generations about 5 free a month, Pro about 20 USD a month.
Choose it when
Browse the free site for a film's product screens; add the connector only if React pages become regular work.
Watch for
React and Tailwind only.; Generating new components beyond the free allowance is paid.; Community components vary in quality: pick, don't trust.
