Cube

Cube is a compact JavaScript animation library built around four fixed "motions" - rise, leave, morph and reveal - designed to solve common UI transitions without configuration dials. Each motion ships with predetermined timing and behavior: rise (640ms, 70ms stagger) is an entrance with opacity plus a 12px lift; leave (320ms, 40ms stagger) is the exit mirror with a 12px drop and holds the end state until removal; morph (220ms, 130ms lead) handles state changes by preserving shared leading text, blurring others and crossfading icons while the parent width follows; reveal triggers a rise when an element enters the viewport. API usage is simple: import rise/leave/morph/reveal from cube-motion or use framework adapters (React, Vue, Solid, Svelte). Under the hood it uses element.animate(), IntersectionObserver and the browser’s reduced-motion preference, with no runtime dependencies.

Design choices favor opinionated consistency over configurability: duration, curve (a fixed cubic-bezier) and distances are fixed and only stagger/delay are adjustable. Cube intentionally excludes timelines, gesture handlers and spring solvers, and recommends other tools for layout animation. Reduced-motion converts translations/scale/blur to fades; morph becomes a crossfade. The core is MIT-licensed, zero-dependency, and authored by Daniel White.