delight

Keep delight moments under one second, make them skippable or subtle, and never delay core functionality. Delight should amplify the experience, so if users notice the animation more than accomplishing their goal, reduce its intensity.

Common examples include button press effects with transform and shadow changes, checkmark draw animations on success, hover reveals on icons, and spring-physics toggle switches. Libraries like Framer Motion, GSAP, and React Spring simplify implementation.

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

Write loading messages specific to what your product actually does, add progress indication with encouraging copy, and use skeleton screens with subtle animation. Avoid generic phrases like 'herding pixels' which read as machine-generated filler.

Playful copy is inappropriate during critical errors, in high-stakes contexts like banking or healthcare, and when it mismatches brand personality. Match the tone to the emotional moment: celebrate success but empathize with failures.

Respect reduced-motion preferences by providing alternatives to animation, keep sound cues quiet with a mute option, and ensure screen reader users get equivalent personality through alt text. Never sacrifice performance or accessibility for visual flair.