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. Press and hold to feel the spring.
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-inExiting: Accelerates away
ease-in-outSymmetric: Loops, staggered motion
linearConstant: Progress bars, spinners
Note: Slowed to 800ms so you can see the curves; production durations are in the table below. Most UI uses
ease-out for both entering and exiting (exits just run faster). Reserve ease-in for elements leaving the screen entirely.Duration scale
Four tiers, capped at 300ms. Anything longer feels sluggish.
TierUsageDuration
MicroTooltips, small hovers100ms
StandardButton hover, input focus150ms
ContentTab swap, accordion200ms
MaximumModal, mobile menu300ms
Component motion audit
Every animated component in the registry and its motion config.
ComponentInteractionType
ButtonPress feedback:
active:scale-[0.98]CSSTabsPill slide:
bounce: 0.1SpringShimmerShimmer loop:
linear, repeatFramerTooltipEnter/exit:
fade-in-0RadixSwitchThumb slide:
transitionCSSNote: Every animation here moves only
transform and opacity: the two properties the browser composites on the GPU. I avoid width, height, and position changes because they force layout on every frame.