Efectos de partículas: polvo, chispas y luz en diseños animados

Un efecto de partículas es una animación hecha de muchos puntos diminutos que se mueven cada uno por su cuenta: polvo flotando en un haz de luz, brasas que suben de una hoguera, estrellas, nieve, chispas o niebla. En un diseño animado, las partículas añaden profundidad y atmósfera a un fondo sin competir con las palabras, siempre que sean pocas, pequeñas y lentas. El arte está en la contención: las partículas deberían sentirse antes de notarse.

Cómo funciona un efecto de partículas

Cada partícula es un pequeño conjunto de números: dónde está, qué tamaño tiene, a qué velocidad y en qué dirección se mueve, cuánto se ve y, a veces, cuánto vive. El efecto nace de cientos de partículas ligeramente distintas que siguen la misma regla sencilla. Cambia la regla y los mismos puntos crean un ánimo completamente distinto.

Cómo conseguir partículas sutiles

La diferencia entre atmósfera y salvapantallas casi siempre está en la cantidad y la velocidad. Estos ajustes mantienen las partículas en el fondo, que es donde deben estar.

Varía el tamaño y la opacidad para sugerir profundidad: las partículas pequeñas, nítidas y tenues se leen como lejanas, y unas pocas más grandes y suaves, como cercanas al objetivo. Las más cercanas también deberían moverse un poco más rápido, que es el mismo truco que hay detrás del parallax.

Partículas y texto

Una mota brillante que cruza una letra la hace parpadear, y un campo de ellas hace difícil leer la letra pequeña. Deja las palabras en una zona más tranquila del encuadre, reduce las partículas detrás de ellas o usa una tipografía tan grande que una mota de paso no importe. Nunca añadas un resplandor detrás de las palabras para rescatarlas: un fondo más tranquilo lo resuelve mejor. Texto sobre un degradado trata el contraste en fondos animados.

Dónde se gana su sitio un efecto de partículas

Las partículas recompensan las pantallas que la gente mira más de un segundo. En una publicación del feed que se pasa de largo apenas se notan; en una historia, una pantalla de tienda o el hero de una web, le dan a la vista algo tranquilo en lo que descansar.

• Fondos de historias y Reels, donde un encuadre a pantalla completa se mantiene varios segundos.
• Pantallas en locales: cartas digitales, pantallas de recepción y escaparates que se repiten todo el día. Consulta vídeo ambiental.
• Heros de webs, como una capa ligera sobre un degradado, detenida para los visitantes que prefieren movimiento reducido.
• Cuentas atrás de eventos y lanzamientos, donde las brasas o las estrellas marcan el ánimo de la propia noche.
• Fondos de pantalla de móvil y escritorio, donde el polvo lento o las estrellas nunca cansan. Consulta fondos de pantalla animados.

Loops y exportación de efectos de partículas

1. 1

   Haz que el loop sea continuo

   Las partículas que salen por un borde deben reaparecer por el opuesto, para que el último fotograma enlace con el primero. Loops perfectos explica el método.

2. 2

   Exporta en MP4, no en GIF

   El GIF solo tiene 256 colores por fotograma, y unos puntos diminutos en movimiento sobre un degradado suave se convierten en ruido moteado. El MP4 los resuelve mucho mejor.

3. 3

   Dale al vídeo calidad suficiente

   El detalle fino en movimiento es difícil de comprimir. Si las partículas se emborronan o desaparecen, exporta con más calidad o reduce cuántas hay.

4. 4

   Compruébalo en un móvil

   Las plataformas recomprimen lo que subes. Publícalo antes en privado o envíatelo a ti, y asegúrate de que las partículas han sobrevivido.

El banding y las partículas suelen aparecer juntos en fondos oscuros; banding en degradados tiene las soluciones. GIF frente a MP4 explica por qué el vídeo gana con el detalle en movimiento.

Un efecto de partículas con CSS y canvas

En una web, lo mejor es dibujar una capa ligera de partículas en un elemento canvas colocado sobre el fondo, con pointer-events: none para que nunca bloquee los clics. Este script dibuja polvo a la deriva y respeta a los visitantes que han pedido menos movimiento: ven las partículas quietas.

const canvas = document.querySelector('canvas.dust');
const ctx = canvas.getContext('2d');
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
let w = 0, h = 0;

function resize() {
  w = canvas.clientWidth;
  h = canvas.clientHeight;
  canvas.width = w * dpr;
  canvas.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  draw();
}

const dust = Array.from({ length: 70 }, () => ({
  x: Math.random(), y: Math.random(),
  r: 0.5 + Math.random() * 1.5,        // mostly tiny
  speed: 0.00002 + Math.random() * 0.00006,
  alpha: 0.15 + Math.random() * 0.45,
}));

function draw() {
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = '#fde68a';
  for (const p of dust) {
    ctx.globalAlpha = p.alpha;
    ctx.beginPath();
    ctx.arc(p.x * w, p.y * h, p.r, 0, Math.PI * 2);
    ctx.fill();
  }
}

let last = performance.now();
function tick(now) {
  const dt = now - last; last = now;
  for (const p of dust) {
    p.y -= p.speed * dt;               // drift upwards
    if (p.y < -0.02) p.y = 1.02;       // wrap to the bottom
  }
  draw();
  requestAnimationFrame(tick);
}

window.addEventListener('resize', resize);
resize();
if (!reduce) requestAnimationFrame(tick);

Mantén un número moderado en los móviles, donde cada partícula cuesta batería. Prefers reduced motion explica la media query en detalle.

Partículas en Gradiently

En Gradiently, las partículas forman parte de un Mark: un grano fino que deriva en los propios colores del Mark, teñido para pertenecer y no pegado encima en blanco. Cuando exportas un diseño animado con Pro, puedes mantener las partículas del diseño, apagarlas o probar otro estilo como polvo, estrellas, niebla, enjambre, seda o brasas. Elige el movimiento Quieto y el fondo se mantiene mientras solo se mueven las partículas. Los loops se exportan sin cortes de 5 a 30 segundos, y una exportación fija deja las partículas exactamente como reposan en el diseño.