Everything moves the way an athlete does: a slow start, then all at once.
Curves
Three curves cover everything
Each curve has one job. Start the race to see them side by side over the same 900 ms.
STRIDE ease
cubic-bezier(1, 0.25, 0.85, 1)Holds back, then commits. For big moves: page transitions, the mosaic.
Settle
cubic-bezier(0.2, 0.1, 0, 1)Fast out, soft landing. For anything that appears: menus, cards, tooltips.
Linear
linearProgress only: timers, loading bars, a scrub head.
Wordmark reveal · 360 ms
Timing
Durations
- Fast · 150 ms
- Hover, press and focus states
- Base · 300 ms
- Menus, cards and anything appearing on screen
- Max · 400 ms
- Page transitions and the wordmark reveal
- Scroll-driven
- The home mosaic: tied to the scroll, not the clock
Rules
How STRIDE moves
- The wordmark always leads a film: top-left, in within the first half-second, never a slow fade.
- Nothing bounces. Controlled speed, not playfulness.
- One thing moves at a time. If two things must move, the second starts when the first lands.
- Keep every transition under 400 ms. Only the home mosaic is scroll-driven and may run longer.
- Honour reduced motion everywhere: end states appear instantly, nothing loops.