Motion
Motion is quiet and quick. It confirms an action or eases a change of state; it is never decoration. And it stops the moment a visitor asks for less.
Durations & curves
Most transitions run at a fifth of a second on an ease curve: a colour shift on hover, a border settling in. The theme swap runs a little longer so a whole-page repaint does not snap. Pages fade up a few pixels on load. Bottom sheets are the one expressive move, sliding in on a spring curve.
| Motion | Value |
|---|---|
| Default transition | 0.2s ease |
| Theme swap | 0.3s ease |
| Page fade-in | 0.3s, up 8px |
| Hover lift | up 2px + shadow |
| Sheet spring | cubic-bezier(0.32, 0.72, 0, 1) |
Reduced motion
When a visitor's system asks for reduced motion, the site honours it without exception. Animations and transitions collapse to a hair over zero, and smooth scrolling reverts to a jump. This is the rule, not a nicety:
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
} Contents