Cómo añadir confeti y celebración sin saturar la interfaz
Aprende a diseñar animaciones de confeti y celebración: rendimiento en Canvas frente a DOM, cuándo deleita y cuándo estorba, y respeto al movimiento reducido.
Idea clave
La animación de celebración debe reservarse para logros de gran valor, como completar un proceso de incorporación o cerrar una compra importante. Debe ejecutarse en un lienzo Canvas o WebGL independiente para no bloquear el hilo principal del DOM, apagarse en menos de 2,5 segundos y nunca impedir que el usuario continúe interactuando con la aplicación.
Cuándo el deleite es merecido y cuándo molesta
Lanzar confeti por acciones triviales como guardar un borrador desgasta el efecto y frustra a usuarios frecuentes. Reserva la celebración para hitos decisivos donde el usuario experimente un cierre real de ciclo o un logro relevante.
Rendimiento: Canvas frente a partículas DOM
Crear cientos de elementos <div> en el DOM para simular partículas degrada los fotogramas y la batería en móviles. Utiliza un <canvas> con pointer-events: none que dibuje las partículas y las libere de memoria tan pronto como salgan de la vista.
- Renderiza en un canvas temporal fuera del flujo del documento
- Aplica pointer-events: none para permitir clics a través del efecto
- Limita el recuento de partículas a 60-100 en móviles
- Limpia el canvas y cancela el bucle de animación al terminar
Respetar el movimiento reducido
Muchas personas sufren mareos ante explosiones de partículas en pantalla. Con prefers-reduced-motion activado, sustituye el confeti por un icono estático festivo o un mensaje de felicitación destacado con borde sutil.
Coordinación con audio y respuesta háptica
Si combinas celebración con sonido o vibración háptica en móvil, permite silenciarlo siempre y mantén la respuesta háptica en un pulso único y ligero.
Principios clave para recordar
- Reserva el confeti para hitos principales, no para tareas repetitivas
- Usa Canvas con pointer-events: none para no degradar el DOM
- Limita la duración a 2 o 2,5 segundos como máximo
- Sustituye por felicitación estática ante movimiento reducido
Preguntas frecuentes
Fuentes
- Designing for Delight — Nielsen Norman Group
- HTML Canvas 2D Context — W3C