Motion

Transitions, scroll-driven animations and reduced-motion handling.

Transitions are short and functional. Easing defaults to ease. View Transitions are enabled between pages when the user hasn't opted out of motion.

Examples on this site:

• Button hover: top: 3px shift, no timing (snap feedback).
• Input focus: colour transition 0.3s.
• Tooltip: opacity + transform 0.15s ease.
• Dialog entrance: 0.2s ease-out.
• Toast entrance: 0.25s ease-out.
• Skeleton shimmer: 1.5s ease-in-out infinite.

transition: color 0.3s;
transition: opacity 0.15s ease, transform 0.15s ease;

Reduced motion

All animated components honour prefers-reduced-motion: reduce — page view transitions are disabled, skeleton shimmer stops, alert entrance is removed, and the spinner slows dramatically.

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .spinner  { animation-duration: 3s; }
}