Particle effects: dust, sparks and light in moving designs

A particle effect is an animation made of many tiny points that each move on their own: dust floating in a beam of light, embers rising from a fire, stars, snow, sparks or mist. In a moving design, particles add depth and atmosphere to a background without competing with the words, as long as you keep them few, small and slow. The skill is restraint: particles should be something people feel before they notice.

How a particle effect works

Every particle is a small set of numbers: where it is, how big it is, how fast and in which direction it moves, how visible it is, and sometimes how long it lives. The effect comes from hundreds of slightly different particles following the same simple rule. Change the rule and the same dots become a completely different mood.

Making particles subtle

The difference between atmosphere and a screensaver is almost always quantity and speed. These settings keep particles in the background where they belong.

Vary size and opacity to suggest depth: small, sharp, faint particles read as far away, and a few larger, softer ones read as close to the lens. Nearer particles should also move a little faster, which is the same trick behind parallax.

Particles and text

A bright speck drifting across a letter makes it flicker, and a field of them makes small type hard to read. Keep the words in a calmer area of the frame, thin the particles out behind them, or make the type large enough that a passing speck doesn't matter. Never add a glow behind the words to rescue them: a calmer background does the job better. Text on a gradient covers contrast in moving backgrounds.

Where a particle effect earns its place

Particles reward a screen people look at for more than a second. On a feed post that is scrolled past, they barely register; on a story, a screen in a shop or a website hero, they give the eye something quiet to rest on.

• Stories and Reels backgrounds, where a full screen frame is held for several seconds.
• Screens in venues: menu boards, reception screens and window displays that loop all day. See ambient video.
• Website heroes, as a light layer over a gradient, stopped for visitors who prefer reduced motion.
• Event and launch countdowns, where embers or stars set the mood of the night itself.
• Phone and desktop wallpapers, where slow dust or stars never tire. See live wallpaper.

Looping and exporting particle effects

1. 1

   Make the loop seamless

   Particles that leave one edge should reappear at the opposite edge, so the last frame flows into the first. Seamless loops explains the method.

2. 2

   Export MP4, not GIF

   GIF has only 256 colours per frame, and tiny moving dots on a soft gradient turn into speckled noise. MP4 handles them far better.

3. 3

   Give the video enough quality

   Fine moving detail is hard to compress. If particles smear or vanish, export at a higher quality or reduce how many there are.

4. 4

   Check it on a phone

   Platforms recompress uploads. Post privately or send it to yourself first, and make sure the particles survived.

Banding and particles often appear together on dark backgrounds; gradient banding has the fixes. GIF vs MP4 explains why video wins for moving detail.

A particle effect in CSS and canvas

On a website, a light particle layer is best drawn on a canvas element placed over the background, with pointer-events: none so it never blocks clicks. This script draws drifting dust and respects visitors who have asked for less motion: they see the particles still.

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);

Keep the count modest on phones, where every particle costs battery. Prefers reduced motion explains the media query in full.

Particles in Gradiently

In Gradiently, particles are part of a Mark: fine grain drifting in the Mark's own colours, so they are tinted to belong rather than pasted on in white. When you export a moving design with Pro, you can keep the design's own particles, switch them off, or try another style such as dust, stars, mist, swarm, silk or embers. Choose the Still movement and the background holds while only the particles move. Loops export seamlessly from 5 to 30 seconds, and a still export settles the particles exactly as they rest in the design.