Theme
Motion
Duration and easing tokens for Ontopix transitions and animations.
Production
Motion is a small design surface with large UX impact. These tokens are centralized here so all Ontopix products move at the same speed, with the same feel.
Duration Tokens
| Token | Value (ms) | Tailwind | Use case |
|---|---|---|---|
instant | 0 | duration-0 | State changes with no transition |
fast | 75 | duration-75 | Micro-interactions, hover states |
normal | 150 | duration-150 | Most transitions, button feedback |
moderate | 300 | duration-300 | Panel slides, modal entry |
slow | 500 | duration-500 | Complex animations, page transitions |
Prefer fast or normal for most interactions. Reserve slow for complex, attention-grabbing transitions (e.g. first-run tours).
Easing
Default: ease-out — Ease-out feels responsive; content arrives quickly
| Token | CSS value | Tailwind | Use case |
|---|---|---|---|
ease_out | cubic-bezier(0, 0, 0.2, 1) | ease-out | Elements entering (most common) |
ease_in | cubic-bezier(0.4, 0, 1, 1) | ease-in | Elements exiting |
ease_in_out | cubic-bezier(0.4, 0, 0.2, 1) | ease-in-out | Elements moving on screen |
linear | linear | ease-linear | Color/opacity changes, progress bars |
Quick Guide
| Scenario | Easing |
|---|---|
| Entering | ease-out (fast arrival) |
| Exiting | ease-in (quick departure) |
| Moving | ease-in-out (smooth movement) |
Reduced Motion
All Ontopix animations must respect prefers-reduced-motion. When set, durations collapse to 0ms and transforms are replaced with fades (or omitted entirely).
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0ms !important;
transition-duration: 0ms !important;
}
}
Automation-friendly alternative in Tailwind:
<div class="motion-reduce:transition-none motion-reduce:transform-none transition duration-300">
…
</div>
Related
- Theme → Customization — How to override motion tokens per application
- Guide → Accessibility — Reduced-motion and other accessibility rules