Motion
Motion
Framer + CSS + R3F
Comprehensive motion system
CSS tokens for simple chrome, Framer Motion for orchestration, and Three.js when you need real 3D. One calm language across all three layers.
Decision guide
- CSS — hover, focus, open/close opacity on simple elements.
- Framer Motion — enter/exit, layout morphs, gestures, scroll-linked UI.
- Three.js — spatial product moments, material explorers, interactive 3D.
CSS enter
Loading interactive preview…
Morphing action
Loading interactive preview…
Tokens & CSS
Durations, easings, hover/press recipes, reduced motion.
Framer Motion
Variants, springs, controls, path drawing, number tickers.
Layout & presence
AnimatePresence, shared layoutId, reorder lists, tabs.
Gestures & scroll
Drag, hover, tap, scroll progress, in-view reveals.
Motion components
Product UI patterns: morphing buttons, toasts, sheets.
Three.js
React Three Fiber playground for 3D product moments.