Motion

Principles#

• Transform and opacity only. They run on the compositor and never trigger layout.
• Fast to respond, slow to settle. Hover and press react in 150–200ms; entrances take 300–600ms with an ease-out curve.
• Motion explains. Things slide from where they came from, and leave toward it.
• Always optional. One prefers-reduced-motion rule shortens every animation and transition.

Easing#

Animation utilities#

Declared with --animate-* in the token file (so Tailwind generates animate-* classes and includes the keyframes only when used). This table is read from the file.

Micro-interaction conventions#

The same small vocabulary appears everywhere, which is most of why the library feels coherent.

Enter and exit#

CSS can animate things in as they mount, but not out as they unmount. Overlays here keep themselves mounted until the exit animation has finished, with no effects and no animation library:

const [present, setPresent] = React.useState(open)
if (open && !present) setPresent(true)      // mount when opening

if (!present) return null

return (
  <div
    data-state={open ? "open" : "closed"}
    onAnimationEnd={(e) => {
      // Only our own exit animation, not a child's.
      if (e.target === e.currentTarget && !open) setPresent(false)
    }}
    className="data-[state=open]:animate-pop-in data-[state=closed]:animate-pop-out"
  />
)

Pointer-driven effects#

Spotlight, tilt, magnetic and dock effects respond to the cursor. They write CSS variables or style properties directly on the element inside the event handler, instead of calling setState, so moving the mouse does not re-render React at 60fps.

onMouseMove={(e) => {
  const r = el.getBoundingClientRect()
  el.style.setProperty("--x", `${e.clientX - r.left}px`)
  el.style.setProperty("--y", `${e.clientY - r.top}px`)
}}
// then in CSS: radial-gradient(400px circle at var(--x) var(--y), …)

Independent transform properties

When a component both plays an entrance animation and reacts to the pointer, use the individual scale and translate properties for the pointer part. A running transform animation otherwise overrides inline transform.

Reduced motion#

The token file includes a single rule that makes every animation and transition effectively instant when the user asks for less motion:

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

Because exits wait for animationend, which still fires at 0.01ms, overlays close correctly under reduced motion.

Turning motion down yourself#

• Remove an animate-* class from a component file to take its entrance away.
• Shorten every transition by editing the duration-* values; there are no hidden timings.
• Delete the reduced-motion block's counterpart if you want the opposite: motion is never forced on.