08 — Motion guidelines
Kinetic. Controlled.
Ridable moves like a well-trained horse: purposeful and precise, never jittery. Every animation earns its place — motion signals intent, not decoration.
Timing
Micro-interactions: 100–200 ms. Page transitions: 300–500 ms. Scroll reveals: 600–800 ms. Nothing exceeds 1 s for UI-level motion.
Easing
Default curve: cubic-bezier(0.16, 1, 0.3, 1) — fast departure, smooth arrival. Entrances ease-out, exits ease-in. Never linear.
Page transitions
Content slides up on route change. Elements reveal staggered at 80 ms intervals. No lateral transitions.
Hover states
Buttons: background fills left-to-right over 200 ms. Text links: underline extends from left edge. No bounce, no spring physics.
Scroll reveals
Elements translate 24 px upward and fade in on viewport entry. Grid items stagger at 80 ms per card.
Loader
The R letterform strokes in. Duration: 600 ms. No spinner — the mark is the loader.
Never
- ✗ Bouncing or spring physics on brand elements
- ✗ Rotating or spinning the logo at any size
- ✗ Parallax faster than the page scroll speed
- ✗ Autoplay video with sound enabled by default
- ✗ Motion that cannot be justified by function
Accessibility
All motion must be completely suppressed when prefers-reduced-motion: reduce is detected. No exceptions. Provide a static alternative for every animated state. This is a minimum standard, not a recommendation.