delight

Identify natural moments like button presses, hover states, and success confirmations, then apply quick animations under one second using CSS transitions, Framer Motion, or GSAP. Keep interactions skippable and never delay core functionality.

Framer Motion and React Spring handle React component animations and spring physics, GSAP covers universal animation needs, Lottie renders After Effects animations, and canvas-confetti creates celebration effects. Howler.js manages subtle sound cues.

Match the copy personality to the brand and emotional context, such as empathetic messages for errors and encouraging ones for empty states. Avoid generic AI-cliche phrases and write product-specific messages instead.

Animations must respect reduced-motion preferences, provide alternatives for screen readers, and stay performant without jank. Compress assets, lazy load delight features, and keep volumes low with a mute option for sounds.

Avoid delight when it delays core functionality, during critical errors, or when it conflicts with brand context such as serious financial tools. Delight should enhance usability, never obscure it, and less is more.