Animations that feel physical
Spring physics, not timing curves. Elements ease in with weight, settle with bounce, and exit with purpose. Every transition at 60fps, GPU-accelerated, reduced-motion aware.
Spring physics
Traditional animations use fixed timing curves — ease-in, ease-out, linear. They feel robotic. Spring physics simulate real mass, tension, and friction. The result: animations that feel alive. A dropdown doesn't slide — it springs. A modal doesn't fade — it settles.
- motion/react spring system with configurable stiffness, damping, mass
- Natural overshoot and settle for dropdown menus
- Momentum-based scroll and swipe gestures
- Dynamic spring constants adapt to element size
Layout animations
When elements reorder, resize, or reflow, they don't teleport. motion/react's layout animation system detects DOM position changes and smoothly interpolates every affected element to its new location. Lists reorder fluidly. Filters reveal results gracefully.
- Automatic FLIP (First, Last, Invert, Play) animations
- Smooth reorder when filtering, sorting, or drag-dropping
- Shared layout animations for modals and expanded views
- AnimatePresence for enter/exit transitions
- No manual position calculations required
Enter & exit transitions
Elements don't just appear and disappear. They enter with scale and opacity, settle into place, and exit with a quick fade. AnimatePresence tracks component lifecycle so exit animations complete before the element is removed from the DOM.
- Fade + scale from 95% to 100% on mount
- Exit animations complete before DOM removal
- Staggered children for list entry effects
- Direction-aware: slide from the side that makes sense
- Overlays dim in smoothly with backdrop blur
<motion.div initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }} />
</AnimatePresence>
60fps, guaranteed
Every animation uses GPU-accelerated properties only. Transform, opacity, filter. No layout thrashing. No paint storms. Just smooth composite-layer rendering.
How it feels
Like moving real objects.
Pick up a card — it lifts with weight. Drag it — it follows with a spring lag that says "I'm real." Drop it — it settles with a bounce that says "I landed." Open a dropdown — it doesn't slide, it springs. Close a modal — it doesn't vanish, it contracts. Every micro-interaction tells you: this tool respects your attention.