Skip to content

Motion

One easing curve for kit transitions plus the mark's draw-on animation; everything honors prefers-reduced-motion.

Tokens

  • --nx-ease
  • --nx-ease-in-out
  • --nx-dur-fast
  • --nx-dur-base
  • --nx-dur-slower

Accessibility

  • `@media (prefers-reduced-motion: reduce)` disables the mark draw-on, shimmer, spinner spin, indeterminate progress sweep, and every interactive-control transition in kit.css's reduced-motion block — the end state still renders, only the animation is removed.

Do / Don’t

  • Do: Route all new motion through --nx-dur-*/--nx-ease-* tokens.Don’t: Don't ship an animation without a reduced-motion off-switch.

View in spec →