delight

Add micro-interactions by targeting button presses, hover states, toggles, and form inputs with CSS transitions or libraries like Framer Motion and React Spring. Keep each interaction under one second and use easing curves like ease-out-quart for natural motion.

Framer Motion works for React, GSAP is framework-agnostic, Lottie renders After Effects animations, and canvas-confetti handles celebration effects. For sound, Howler.js or the use-sound React hook manage audio cues.

Avoid playful delight during critical errors, in serious domains like banking or healthcare, and when it delays core functionality. Delight should enhance usability, never obscure it, and must respect reduced-motion accessibility settings.

Replace generic spinners with product-specific loading messages, skeleton screens with subtle animation, and progress indicators with encouraging copy. Avoid cliched phrases like "herding pixels" and write messages specific to what your product actually does.

Animations can hurt performance if unoptimized, so compress images, lazy load delight features, and prefer CSS transforms over layout-triggering properties. Test for jank and ensure delight never sacrifices speed or blocks user tasks.