Rule: animation

This is an editorial-print design. Motion is punctuation, not decoration.

Budget

Purpose or nothing. Motion may signal a state change, direct attention to what just changed, or smooth a layout shift. Nothing else.
Duration: 150–250ms for UI feedback, up to 400ms for a page transition. Longer reads as sluggish; shorter reads as a glitch.
Easing: cubic-bezier(.2,0,0,1) for entrances, ease-out for exits. Never linear for anything a person watches. Never bounce/elastic — wrong register for this design.
One thing moves at a time. Staggered cascades of cards are a template default; this site has a point of view and does not do them.

`prefers-reduced-motion` is mandatory

Several current stylesheets already honour it. Every new animation must:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Reduced motion means reduced, not broken: the end state must still be correct and the interface still usable. Test it — in DevTools, Rendering → Emulate prefers-reduced-motion.

Performance

Animate transform and opacity only. They composite on the GPU. Animating width, height, top, left, or margin forces layout on every frame and will show up as a failed INP.
will-change only on an element about to animate, removed after. Leaving it on permanently costs memory and can hurt performance.
Prefer CSS transitions. Reach for the Web Animations API only for sequencing that CSS cannot express. Do not add an animation library — it is a runtime dependency on a site whose thesis is having none.
INP budget is 200ms. An animation that delays interaction response fails.

Astro view transitions

If page transitions are wanted, use Astro's <ClientRouter />. It is the only sanctioned motion dependency, and it must:

degrade cleanly with JS disabled (it does — full navigation)
respect prefers-reduced-motion
not break the review desk's query-param deep links or browser back/forward

Accessibility

Never animate anything that conveys information on its own. Motion is redundant reinforcement.
Nothing flashes more than three times per second.
Focus must stay visible throughout a transition, and focus order must not change because of one.

2.4 KiB Raw Permalink Blame History Unescape Escape