THREE LEVELS
Zero Config
useSimplePageMotion('home') — pass a page type, get a full preset. Hero, title, description, CTA — all animated. One line.
Config Object
usePageMotions({ hero: { type: 'hero' }, button: { type: 'button', hover: true } }) — map elements to motion types. One observer per page.
Full Control
useFadeIn, useSlideUp, useSpringMotion, useGesture — individual hooks that return { ref, style }. Compose freely.
DESIGN PRINCIPLES
CSS-First
CSS transitions run on the GPU compositor, off the main thread. React re-renders once — the browser handles the rest. JS only steps in where CSS can't go: spring physics and real-time gestures.
No External Dependencies
Only react and react-dom as peers. sideEffects: false for full tree-shaking — unused code stays out of your bundle.
40+ Hooks
Entrance, scroll, physics, gesture, interaction, orchestration, looping. Each returns { ref, style } — compose without wrapper components.
Real Spring Physics
useSpringMotion implements Hooke's Law from scratch. Mass, stiffness, damping — real physics, not CSS cubic-bezier approximation.
Performance Built-in
Layer management caps GPU layers at 100. PerformanceOptimizer tracks FPS and memory. useReducedMotion for accessibility.
VS FRAMER MOTION