Foundations/Motion
Motion
Durations and easings are defined once in the shared theme and exposed as Tailwind utilities. Prefer these over ad-hoc duration-150 values in library components.
Duration tokens
| CSS variable | Value | Tailwind |
|---|---|---|
| --motion-duration-instant | 0ms | duration-pg-instant |
| --motion-duration-fast | 120ms | duration-pg-fast |
| --motion-duration-normal | 200ms | duration-pg-normal |
| --motion-duration-slow | 320ms | duration-pg-slow |
| --motion-duration-slower | 480ms | duration-pg-slower |
Easing tokens
| CSS variable | Tailwind | Use for |
|---|---|---|
| --motion-ease-standard | ease-pg-standard | Default UI transitions |
| --motion-ease-emphasized | ease-pg-emphasized | Bouncy overlays |
| --motion-ease-linear | ease-pg-linear | Progress, loops |
Reduced motion
Respect prefers-reduced-motion: reduce for decorative or non-essential animations. The product app wraps several patterns with media queries; extend the same approach when adding motion to @flux/ui components.
Example
className="transition-colors duration-pg-fast ease-pg-standard"