delight

Add micro-interactions with CSS transitions for button presses and hover lifts, or libraries like Framer Motion and React Spring for spring physics. Keep each interaction under one second and never delay core functionality.

Framer Motion suits React projects, GSAP works universally, Lottie renders After Effects animations, and canvas-confetti handles celebration effects. For sound cues, use Howler.js or the use-sound React hook.

Match copy personality to brand and context: consumer apps can be whimsical, while banking apps should stay warm but restrained. Soften frustrating moments with empathy rather than jokes during critical errors.

Animations can harm both if done carelessly. Respect reduced-motion preferences, provide alternatives for screen readers, compress assets, lazy-load delight features, and avoid jank by keeping animations lightweight.

Avoid delight when it delays core functionality, during critical errors, or when it cannot be skipped. Delight should enhance usability, never obscure it; if users notice the animation more than their goal, reduce it.