Motion
Spring physics over linear easing. All motion uses natural spring animations that feel alive and responsive.
Duration Scale
Spring Physics
Consumer
Relaxed, 300-500ms feel
Click the box to trigger animation
Merchant
Snappy, 150-250ms feel
Click the box to trigger animation
Courier
Tactile, confident
Click the box to trigger animation
Four spring configurations:
- Standard (mass: 1, stiffness: 100, damping: 15) - Default for most animations
- Enter (mass: 0.8, stiffness: 120, damping: 14) - Elements appearing with subtle overshoot
- Exit (mass: 0.8, stiffness: 120, damping: 20) - Elements disappearing, no overshoot
- Bounce (mass: 0.6, stiffness: 80, damping: 8) - Playful interactions with pronounced bounce
Language Adaptation
Motion personality varies by context:
- Consumer (400ms): Leisurely and comfortable for browsing
- Merchant (175ms): Snappy and efficient for productivity
- Courier (200ms): Tactile and immediate for real-time updates
Performance Guidance
Motion should feel instant and responsive. Animations use GPU-accelerated properties (position and opacity changes) rather than properties that trigger layout recalculation (size and spacing changes).
This ensures smooth 60fps animation across all devices, from high-end desktops to mid-range Android phones.
Accessibility
All motion respects user preferences for reduced motion. Users who enable this accessibility setting will see instant transitions instead of animated ones, maintaining usability while respecting their needs.