delight

Add micro-interactions by targeting button presses, hover states, toggles, and form inputs with CSS transitions or libraries like Framer Motion and React Spring. Keep each animation under one second and ensure it never delays core functionality.

Framer Motion works for React, GSAP is framework-agnostic, Lottie renders After Effects animations, and React Spring provides spring physics. Canvas-confetti handles celebration effects, and Howler.js manages subtle sound cues.

Write copy that matches your brand personality and is specific to your product, such as encouraging empty states or empathetic error messages. Avoid generic AI-sounding phrases and never be playful during critical errors.

Avoid delight when it delays core functionality, during critical errors, or when it conflicts with brand context such as banking or medical tools. Delight should enhance usability, never obscure it, and must respect reduced-motion accessibility settings.

Animations can harm both if implemented carelessly. Respect prefers-reduced-motion settings, provide alternatives for screen readers, compress assets, lazy-load delight features, and test that nothing causes jank or slowdowns.