Cube

# Cube — JavaScript animation library for UI motion Source: [https://www.cube-motion.dev/](https://www.cube-motion.dev/) [cube](https://www.cube-motion.dev/)[API](https://www.cube-motion.dev/#api)[React](https://www.cube-motion.dev/#react)[FAQ](https://www.cube-motion.dev/#faq)[GitHub](https://github.com/danielwh2/cube-motion)## Fourmotions\. Nodials Cube is a JavaScript animation library with no dials\.`rise`,`leave`,`morph`and`reveal`each ship with the duration, curve and stagger chosen for that job\. Web Animations API underneath, zero dependencies\. ## rise 640ms · 70ms staggerEntrance\. Opacity and a 12px lift, siblings staggered\. ## leave 320ms · 40ms staggerExit\. Opacity and a 12px drop, held until you remove the node\. Half the entrance\. ## morph 220ms · 130ms leadState change\. Text keeps shared leading letters and blurs the rest in and out\. Icons crossfade as whole faces\. The parent’s width follows\. ## reveal rise, when in viewBelow the fold\. Hidden until it enters the viewport, then rises once\. Scroll the box\. ## API ``` import { rise, leave, morph, reveal } from "cube-motion"; rise(".hero", { targets: "children" }); // staggered entrance leave(toast); // staggered exit, holds the end state morph(oldIcon, newIcon); // one state into the next reveal(".card"); // rise when scrolled into view ``` ## React ``` import { Rise, Morph, Reveal } from "cube-motion/react"; <Rise as="section" targets="children" className="hero"> // stagger children <h1>Four motions.</h1> <button onClick={save}> <Morph active={saved} off="Save" on="Saved" /> </button> </Rise> <Rise show={open} className="toast">Saved</Rise> // rises in, leaves before unmount <Reveal as="ul" targets="children" className="cards">{cards}</Reveal> ``` ## Why no dials ### Numbers, not options Duration, curve and distance are fixed for each job\. Stagger and delay control when the motion starts\. ### Jobs grow, dials never Cube covers entrances, exits, state changes and scroll reveals\. Use another tool when you need timelines, gestures or layout animation\. ### Platform underneath Web Animations API and IntersectionObserver\. Nothing to polyfill, no frame loop, nothing fighting the browser\. ## FAQ Why not Motion or GSAP?They give you every dial\. Cube gives you four decisions already made\. Reach for them when you need a timeline, gestures or layout animation\. Does Cube have dependencies?The core has zero runtime dependencies and uses the browser’s Web Animations API\. React, Vue, Solid and Svelte are optional peer dependencies for their adapters\. Where did press go?Press feedback is three lines of CSS: a`transition`on`scale`and`:active \{ scale: 0\.97 \}`\. CSS also answers keyboard activation, which a pointer listener never did, so the function was retired and its place went to`leave`\. What about springs?Cube uses a fixed cubic\-bezier curve, not a spring solver\. There are no spring options\. What happens with reduced motion?Opacity changes stay; translation, scale and blur go\. rise and leave become fades, morph a crossfade\. reveal applies the reduced\-motion preference when an element enters view\.