Animation & motion
Fast and purposeful. Every transition stays under 300ms, spring physics handle interactive elements, and every animation respects reduced motion preferences.
Press feedback
Every button scales down on press for tactile feedback via a fast CSS transform transition.
Spring indicators
Interactive indicators use spring physics for natural momentum. Click between tabs to feel the spring settle.
Easing direction
Match the easing curve to the motion: entering decelerates, exiting accelerates.
ease-outEntering: Decelerates into place
ease-inLeaving: Accelerates off-screen
ease-in-outMovement: Travels across the screen
linearConstant: Progress bars, spinners
Duration scale
Four tiers, capped at 300ms. Anything longer feels sluggish.
| Tier | Usage | Duration |
|---|---|---|
| Micro | Small hovers, color shifts | 100ms |
| Standard | Tooltip, button hover, input focus | 150ms |
| Content | Tab swap, accordion | 200ms |
| Maximum | Modal, mobile menu | 300ms |
Component motion audit
The kit's animated components and the motion config behind each.
| Component | Interaction | Type |
|---|---|---|
| Button | Press feedback: active:scale-[0.98] | CSS |
| Tabs | Pill slide: bounce: 0.1 | Spring |
| Shimmer | Shimmer loop: linear, repeat | Framer |
| Tooltip | Enter/exit: fade + scale 150ms | Base UI |
| Popover | Enter/exit: fade + scale 200/150ms | Base UI |
| Dropdown | Enter/exit: fade + scale 200/150ms | Base UI |
| Dialog | Enter/exit: fade + scale 200/150ms | Base UI |
| Alert Dialog | Enter/exit: fade + scale 200/150ms | Base UI |
| Switch | Thumb slide: transition | CSS |
| Collapsible | Expand/collapse: height 200/150ms | Height |
| Card | Content grow: animateHeight 200ms | Height |