Animaciones que no espantan: rendimiento y accesibilidad

Rendimiento

• Carga los efectos pesados bajo demanda (React.lazy + Suspense) y solo cuando estén cerca de la pantalla (IntersectionObserver).
• Un solo efecto WebGL activo a la vez. El navegador limita los contextos (unos 16) y cada uno consume batería.
• Anima transform y opacity: la GPU los mueve gratis. Evita animar width, height, top o left.
• En móvil, baja la resolución del canvas (dpr máx. 1,5) y el número de partículas.
• Aloja las fuentes en tu web y usa font-display: swap.
• Mide con Lighthouse: LCP por debajo de 2,5 s y CLS por debajo de 0,1.

// Montar un efecto solo cuando entra en pantalla
const Aurora = React.lazy(() => import('./Aurora'));

function Hero() {
  const [ref, visible] = useInView();          // IntersectionObserver
  return <section ref={ref}>{visible && <Suspense><Aurora /></Suspense>}</section>;
}

Accesibilidad

• Respeta prefers-reduced-motion: quien lo activa en su sistema lo necesita (vértigo, migrañas, epilepsia).
• Nada debe parpadear más de 3 veces por segundo.
• El movimiento nunca es la única forma de transmitir información.
• Todo lo que se hace con el ratón debe poder hacerse con teclado o táctil.
• Contraste de texto sobre fondos animados: mínimo 4,5:1.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}