Foundation
Motion
A CSS-first motion language for feedback, presence and spatial context. Component state remains readable when motion is reduced or unavailable.
Live gallery
Inspect each family at a readable speed, then switch to its actual production timing.
FadeOpacity: 0 to 1
Preview
Continuous feedback
Reserved for active progress; reduced motion stops repetition.
Spinner
Loading in progress
Pulse
Background activity
Token scale
| Family | Token | Value |
|---|---|---|
| Duration | instant | 80ms |
| Duration | fast | 120ms |
| Duration | base | 180ms |
| Duration | slow | 260ms |
| Duration | deliberate | 420ms |
| Duration | spinner | 700ms |
| Duration | pulse | 1800ms |
| Distance | micro | 0.125rem |
| Distance | floating | 0.5rem |
| Scale | enter | 0.98 |
| Scale | pressSmall | 0.96 |
| Scale | pressMedium | 0.98 |
| Scale | pressLarge | 0.99 |
Native utility families
Presence
animate-poyraz-fade-in / animate-poyraz-fade-outOpacity onlyScale
animate-poyraz-scale-in / animate-poyraz-scale-outOpacity + scaleFloating
animate-poyraz-floating-in / animate-poyraz-floating-outRadix data-side awareOverlay
animate-poyraz-overlay-in / animate-poyraz-overlay-outOpacity; blur remains staticDisclosure
animate-poyraz-accordion-down / animate-poyraz-accordion-upRadix measured heightProgress
animate-poyraz-spin / animate-poyraz-pulseNon-essential loading feedbackDo
Animate opacity and transform, keep hover travel at 1-2px, and make exits slightly shorter than entrances.
Preserve labels, focus and state attributes so motion remains supplementary.
Don't
Do not animate blur, layout position, border width or large shadows. Do not use perpetual motion for semantic state.
Do not remove content in reduced-motion mode; reduce duration and repetition instead.