Source
Cube site, API and live demo
Read the primary source.
Reference illustration, not a screenshot of this source.
Cube
JavaScript animation library · UI
Four ready motions for page elements: rise (entrance), leave (exit), morph (a label or icon changing state) and reveal (rise when scrolled into view). Durations, curves and staggers are fixed by the library.
Use it for
Choose when a page needs calm entrances, exits and state changes without tuning durations and curves by hand, including on a house single-file page.
Choose something else for
Not for scroll-scrubbed scenes, timelines, 3D or anything that needs its own timing; not for text a reader must see before the script loads.
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 is operated
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.
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
Language-independent. morph keeps shared leading letters when a label changes, so it suits any script written left to right; right-to-left labels were not tested.
Make elements enter, leave and change smoothly
★★★★☆ 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.
Decision: 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.
Limits and things to check
- 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.
Beside Flapkit on the interface shelf. Flapkit is one display for React 19 products; Cube is general page motion that also works on a plain HTML page.
Evidence
Measured 21 September 2026 in headless Chromium on a plain HTML page loading cube-motion 0.1.0 from jsDelivr. rise ran three staggered animations at 640 ms with 70 ms between them on the curve cubic-bezier(0.2, 0, 0, 1), as documented. With reduced motion requested, the 12 px lift was dropped and only the fade remained. reveal held the list at opacity 0 until it entered the viewport, then showed it. leave and morph were not exercised.
Catalogue review: 2026-09-21. The evidence note identifies what was verified. This date does not imply a fresh tool test or verification of every linked source.
