Fondos animados

Un fondo animado convierte un hero sencillo en algo memorable. La regla es que el fondo acompañe sin competir: movimientos lentos, colores suaves y el contenido siempre legible encima.

Concepto: rendimiento en animaciones grandes

Los fondos ocupan toda la pantalla, así que cada fotograma cuesta más. Ten en cuenta:

• Qué animas: transform y opacity son baratas. background-position en un degradado gigante o filter: blur() animado son más costosos; úsalos en elementos que no cambien de tamaño y con movimientos lentos.
• will-change: transform pide al navegador que prepare una capa propia para el elemento. Ayuda en animaciones continuas, pero cada capa consume memoria: no lo pongas en todo.
• Canvas es ideal para cientos de elementos (partículas). Dibujar en un <canvas> evita crear cientos de nodos en el DOM.
• Pausa lo que no se ve: si el fondo sale de pantalla, puedes detener su requestAnimationFrame con IntersectionObserver o el evento visibilitychange.

Contraste ante todo

Encima de un fondo animado pon una capa semitransparente o un panel con backdrop-filter: blur() para que el texto se lea siempre (contraste mínimo 4.5:1).

Degradado animado

El clásico: un degradado 4 veces más grande que la pantalla cuya posición se mueve lentamente. Incluye un panel de "vidrio esmerilado" (glassmorphism).

Degradado animado + glassmorphism

✏️ Editar en el Playground↗ Abrir en pestaña nueva

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: mover-fondo 15s ease infinite;
}
@keyframes mover-fondo {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

Partículas conectadas (canvas)

Puntos que flotan, se conectan con líneas cuando están cerca y huyen del mouse. Muy usado en sitios de tecnología.

Partículas en canvas

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Estructura del código:

1. crear() ajusta el canvas al tamaño de la ventana (multiplicado por devicePixelRatio para que se vea nítido en pantallas retina) y genera partículas según el área.
2. dibujar() se ejecuta en cada fotograma con requestAnimationFrame: mueve cada partícula, la hace rebotar en los bordes, la aparta del mouse y dibuja líneas entre las cercanas.
3. Con prefers-reduced-motion se dibuja un solo fotograma estático.

Personaliza el objeto CONFIG (densidad, distancia, velocidad) y la variable CSS --particula.

Cuidado en móviles

Conectar todas las partículas entre sí crece rápido (100 partículas = ~5,000 comprobaciones por fotograma). La densidad se calcula según el área de la pantalla para que en móviles haya menos.

Aurora con blobs

Manchas de color desenfocadas que flotan y se mezclan, con una sutil textura de ruido. 100 % CSS.

Aurora / blobs

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo funciona: cuatro círculos grandes se mueven con transform y cambian su border-radius para verse orgánicos. El contenedor aplica un único filter: blur(70px) a todos (más eficiente que desenfocar cada uno) y mix-blend-mode: screen suma los colores donde se cruzan. El ruido es un SVG feTurbulence incrustado como data URI.

Olas SVG

Un separador con olas animadas para el final de un hero. El mismo trazado se reutiliza 4 veces con <use>, cada una con distinta opacidad y velocidad.

Olas SVG animadas

✏️ Editar en el Playground↗ Abrir en pestaña nueva

<svg class="olas" viewBox="0 24 150 28" preserveAspectRatio="none">
  <defs><path id="ola" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352z" /></defs>
  <use href="#ola" x="48" y="0" />
  <use href="#ola" x="48" y="3" />
  …
</svg>

preserveAspectRatio="none" estira el SVG a todo el ancho sin importar el tamaño de la pantalla. La última ola es del color de la siguiente sección para que la transición sea perfecta.

Cielo estrellado

140 estrellas que titilan con ritmos aleatorios y una estrella fugaz ocasional.

Estrellas que titilan

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Un pequeño script crea cada estrella con variables aleatorias (--x, --y, --t, --d, --retraso) y el CSS las usa. Usar DocumentFragment agrega todas al DOM en una sola operación. Los retrasos negativos hacen que cada estrella empiece en un punto distinto de su ciclo.

Cuadrícula retro (synthwave)

Un suelo de cuadrícula en perspectiva que avanza hacia el espectador, con un sol a franjas.

Cuadrícula en perspectiva

✏️ Editar en el Playground↗ Abrir en pestaña nueva

.suelo {
  background-image:
    linear-gradient(#d946ef 1px, transparent 1px),          /* líneas horizontales */
    linear-gradient(90deg, #d946ef 1px, transparent 1px);   /* líneas verticales */
  background-size: 50px 50px;
  transform: perspective(300px) rotateX(60deg);             /* tumbada en 3D */
  animation: avanzar 2s linear infinite;
}
@keyframes avanzar { to { background-position: 0 50px; } }  /* avanza exactamente una celda */

Mover el fondo exactamente una celda hace que el bucle sea perfecto e infinito. mask-image desvanece la cuadrícula hacia el horizonte.

Ejercicios

1. Cambia el degradado animado por los colores de una marca y baja la velocidad a 25 s.
2. Haz que las partículas cambien de color según su posición horizontal (hsl(x / ancho * 360 ...)).
3. Pausa la animación de partículas cuando la pestaña no esté visible (document.hidden).

Ver solución del ejercicio 3

let activo = true;
document.addEventListener('visibilitychange', () => {
  activo = !document.hidden;
  if (activo) requestAnimationFrame(dibujar);
});
// y al final de dibujar():
if (!sinMovimiento && activo) requestAnimationFrame(dibujar);

Resumen

• Fondos = movimiento lento, contenido siempre legible.
• Degradado animado: background-size: 400% + background-position.
• Muchos elementos → canvas + requestAnimationFrame.
• Blobs: un único filter: blur() en el contenedor y mix-blend-mode.
• Bucles perfectos: desplaza exactamente un "periodo" (una celda, un ancho de ola).