FoundationsMotion
One curve. Three durations. No bouncing.
The system uses a single easing curve and three durations. Motion exists to acknowledge the user, not to entertain them.
The curve
The single ease curve is cubic-bezier(0.22, 1, 0.36, 1), an ease-out-quart. It is the curve the page-load reveal uses, the curve every page transition uses, and the curve of the "fade-in" keyframe defined inglobals.css.
Why one curve: the alternative is a small library of curves (bounce, spring, in-out, ease-in-back) that all read as the same in slow motion but different in real use. One curve gives the system a single motion personality.
:root {
--ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
}
@theme inline {
--animate-fade-in: fadeIn 0.7s var(--ease-out-quart) forwards;
}The three durations
Each duration has one job. The dot below the track replays the animation on a loop.
What goes where
| Duration | Use |
|---|---|
duration-300 | Hover, focus, button press, color change |
duration-500 | Dialog open/close, drawer slide, page transition |
duration-700 | Hero reveal, site-canvas fade-in, scroll-driven transitions |
prefers-reduced-motion
The system respects prefers-reduced-motion: reduce at every level. The site-canvas fade-in is dropped. The hero reveal is dropped. Hover transitions that change the geometry of an element are dropped; color transitions remain. Auto-playing motion on the diagrams and the callout dots is disabled.
@media (prefers-reduced-motion: reduce) {
.ds-motion-row__dot,
.site-canvas,
.hero-fade {
animation: none;
}
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}Why this restraint
The site is not a product launch. It is a portfolio and a study report. Animation that calls attention to itself — bouncy buttons, parallax sections, scroll-driven color changes — is a distraction from the arguments the page is making.