Cube — JavaScript animation library for UI motion

cube APIReactFAQ GitHub Four motions.No dials 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. rise640ms · 70ms stagger Entrance. Opacity and a 12px lift, siblings staggered. leave320ms · 40ms stagger Exit. Opacity and a 12px drop, held until you remove the node. Half the entrance. morph220ms · 130ms lead State change. Text keeps shared leading letters and blurs the rest in and out. Icons crossfade as whole faces. The parent’s width follows. revealrise, when in view Below the fold. Hidden until it enters the viewport, then rises once. Scroll the box. API cube.jsimport { 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 optionsDuration, curve and distance are fixed for each job. Stagger and delay control when the motion starts. Jobs grow, dials neverCube covers entrances, exits, state changes and scroll reveals. Use another tool when you need timelines, gestures or layout animation. Platform underneathWeb 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.