delight

Add micro-interactions by targeting button presses, hover states, and toggle switches with CSS transitions or animation libraries like Framer Motion. Keep animations under one second, use easing curves like ease-out-quart, and ensure they never delay core functionality.

Framer Motion works well for React, GSAP is framework-agnostic, Lottie renders After Effects animations, and React Spring provides spring physics. For sound, use Howler.js or the use-sound React hook.

Replace plain spinners with rotating personality-filled messages, skeleton screens with subtle animations, or progress indicators with encouraging copy. For long waits, consider fun facts or tips, but always show real progress when possible.

Avoid delight during critical errors, in contexts where it mismatches brand personality, or when it delays core functionality. Delight should never obscure usability, must respect reduced-motion accessibility settings, and should remain pleasant after repeated exposure.

Animations can hurt performance if not optimized. Compress images, lazy load delight features, prefer CSS transforms over layout-triggering properties, and test for jank. Delight should never sacrifice load speed or responsiveness.