Motion

Motion tells people where something came from or that their action worked. If it does neither, leave it out.

DurationsCopy Anchor Link

These are the values the product already uses most: 0.15s CSS transitions on interactive elements, and a 0.4s fade-up for page content.

CSS transitionsCopy Anchor Link

Transition only the properties that change. Never use transition: all.

.campaign-row {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

Entering contentCopy Anchor Link

Use motion/react for content that appears: a short fade with a small upward move. Stagger siblings by about 0.05s.

import { motion } from "motion/react";

const fadeUp = (delay = 0) => ({
  initial: { opacity: 0, y: 8 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.4, delay, ease: [0.16, 1, 0.3, 1] },
});

<motion.div {...fadeUp(0.05)}>…</motion.div>

Reduced motionCopy Anchor Link

Respect prefers-reduced-motion. Remove movement and keep only the fade, or show the end state at once.

@media (prefers-reduced-motion: reduce) {
  .campaign-panel { animation: none; transition: none; }
}

Don'tCopy Anchor Link

• Don't animate layout on every hover.
• Don't add bounce or spring overshoot to product UI.
• Don't delay a result so an animation can finish.