delight

Add micro-interactions by targeting button presses, hover states, toggles, and form inputs with CSS transitions or animation libraries like Framer Motion and GSAP. Keep each interaction under one second and use easing curves like ease-out-quart for natural motion.

Framer Motion works for React components, GSAP handles universal animation, Lottie renders After Effects animations, and React Spring provides spring physics. For celebrations, canvas-confetti adds particle effects with minimal setup.

Match copy personality to your brand and emotional context: playful brands can use humor, while banks should stay warm but restrained. Never be playful during critical errors, and always keep the message helpful with a clear next action.

Animations can harm accessibility if they ignore reduced-motion preferences or distract screen reader users. Respect the prefers-reduced-motion media query, keep delight skippable, and ensure no core functionality depends on animation.

Avoid delight when it delays core functionality, during critical error states, or when it conflicts with brand context such as banking or medical tools. Delight should enhance usability, never obscure it or mask poor UX.