delight

Add micro-interactions with CSS transitions for button presses and hover lifts, or animation libraries like Framer Motion, GSAP, and React Spring for spring physics. Keep each interaction under one second and ensure it never delays 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 with subtle volume levels.

Write messages specific to what your product actually does, such as "Syncing with your team's changes" rather than generic filler. Avoid cliched phrases like "herding pixels" and match the copy's personality to your brand's tone.

Avoid delight during critical errors, destructive actions, or contexts where users are frustrated or time-pressured. Delight should never delay core tasks, hide poor UX, or appear so frequently that special moments lose their impact.

Respect the prefers-reduced-motion media query and provide alternatives to animated feedback. Ensure delight works with screen readers, keep animations optional or skippable, and never sacrifice performance for visual effects.