Motion Examples
How Astryx components apply duration and easing tokens. Each section calls out which tokens drive the motion so you can see the scale in action.Navigation & Overlays
Modal — backdrop fade and content entry · duration-medium-max
Micro-Interactions
Buttons — hover, press, focus · duration-fast · Dropdown · duration-fast-max
Popover · HoverCard · Tooltip — fade + translate · duration-fast-max · direction-aware
PopoverUses duration-fast-max. Fades and translates toward the trigger.
PopoverUses duration-fast-max. Fades and translates toward the trigger.
PopoverUses duration-fast-max. Fades and translates toward the trigger.
PopoverUses duration-fast-max. Fades and translates toward the trigger.
HoverCardHover to trigger · duration-fast-max
Tooltip · duration-fast-max
Switches — thumb slide, track color · duration-fast
Checkboxes — check transition · duration-fast
Slider — thumb travel · duration-fast · value tooltip · duration-fast-min
Input validation — status message entry · duration-fast-max
Selector — open/close, chevron rotation · duration-fast-max
Apple
Banana
Orange
Mango
Loading & Status
Spinners — continuous rotation · duration-medium-max
Skeletons — pulsing opacity with stagger · duration-medium-max
Progress — determinate: duration-medium · indeterminate: continuous
Status dots — continuous pulse · 2s loop
Online
Away
Busy
Surface Interactions
Tabs — color, active indicator · duration-fast
List items — background hover · duration-fast-min
Reduced Motion
Honor the OS-level prefers-reduced-motion setting; replace movement with instant state changes. Toggle the switch to simulate.