Motion

Motion is a material property, not a garnish. Every animation either communicates a state change or steals attention from one. Decide which before writing the first transition. That perceptual question is the quality criterion; the property lists, durations, and budgets below are how you meet it without paying in jank.

Rule zero: compositor-only

Animate transform, opacity, and filter (on isolated layers). Nothing else.

• Reflow triggers, never animate: width, height, top, left, margin, padding, font-size, border-width. Any of these forces layout recalculation of the whole affected subtree.
• Repaint triggers, animate with caution: color, background-color, box-shadow, border-color, outline. No layout, but expensive at 60fps on large surfaces. Small targeted elements only.
• Never animate box-shadow directly: fade a pseudo-element's opacity instead.

Defaults that don't need discussion

--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);  /* fast start, soft landing */
--duration-state: 150ms;    /* button, toggle, checkbox */
--duration-transition: 250ms; /* dropdown, popover, toast */
--duration-reveal: 350ms;   /* scroll reveals, page-level */

Linear easing is for opacity-only fades and marquees. Everything else uses the standard curve. Anything over 400ms outside marketing pages needs a reason.

The animation budget — set by density

How much information the surface carries decides how much motion it can afford. The denser the interface, the smaller the budget.

Why the cockpit gets nothing: a dense table can hold 200+ cells, and peripheral motion detection is involuntary. Any animation on any cell pulls the user's eye away from the cell they're reading. Instant state change is not perceived as animation:

/* Cockpit: no transition property at all */
.data-cell:hover { background: var(--surface-hover); }

Hover is physics, not magnification

Real surfaces rise, illuminate, or cast shadow. They don't grow. Never scale(1.05) on cards.

/* Elevation hover — surface lifts toward the light */
.card {
  transition: transform 200ms var(--ease-standard),
              box-shadow 200ms var(--ease-standard);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
}

/* Light-response hover — for dark surfaces */
.card-dark:hover { background: oklch(18% 0.01 250); } /* base surface is 14% — one step lighter */

/* Border-emphasis hover — for dense data UI where elevation is wrong */
.data-row:hover { box-shadow: inset 2px 0 0 var(--color-accent); }

Pick one model per surface type and use it everywhere that surface appears.

Scroll reveals

The uniform fade-in-up on every element is always wrong: it says nothing about what to read first. A reveal earns its place only when it sequences information in reading order.

.reveal-group [data-reveal] {
  opacity: 0;
  transform: translateY(8px); /* 8px, not 20px */
  transition: opacity 300ms var(--ease-standard),
              transform 300ms var(--ease-standard);
}
.reveal-group.is-visible [data-reveal] { opacity: 1; transform: translateY(0); }
.reveal-group.is-visible [data-reveal]:nth-child(2) { transition-delay: 60ms; }
.reveal-group.is-visible [data-reveal]:nth-child(3) { transition-delay: 120ms; }

Stagger in groups of 3–5. On dense or productivity surfaces, skip reveals entirely: content is simply present.

Loading states

• Content loading over 300ms gets a skeleton that matches the final layout shape, never a generic centered spinner. The shimmer is a light reflection sweeping across, not a pulse.
• Keep layout stable while loading: the skeleton reserves the space the content will take.
• In dense data UI, skip the shimmer: inline spinner or progress bar on the specific loading region.

Reduced motion is a gate, not a nice-to-have

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

Every scroll reveal, marquee, and auto-playing animation shows its final state immediately under reduced motion. Functional feedback (a progress bar filling) may stay.

Render cost beyond animation

• Shadows: max 2 layers per element. Prefer one diffusion shadow (0 20px 40px -15px rgba(0,0,0,0.05)) over stacks.
• Fonts: variable font over multiple static weights; self-host with font-display: swap; preload the primary weight.
• Images: photos as WebP or AVIF, UI elements as SVG, animation as CSS over Lottie over GIF (never GIF).