Effets de particules : poussière, étincelles et lumière en mouvement

Un effet de particules est une animation composée de nombreux points minuscules qui bougent chacun de leur côté : de la poussière qui flotte dans un rai de lumière, des braises qui s’élèvent d’un feu, des étoiles, de la neige, des étincelles ou de la brume. Dans une création animée, les particules ajoutent profondeur et atmosphère à un fond sans concurrencer les mots, à condition de les garder peu nombreuses, petites et lentes. Tout l’art est dans la retenue : les particules doivent se ressentir avant de se remarquer.

Comment fonctionne un effet de particules

Chaque particule est un petit ensemble de nombres : sa position, sa taille, sa vitesse et sa direction, sa visibilité, et parfois sa durée de vie. L’effet naît de centaines de particules légèrement différentes qui suivent la même règle simple. Changez la règle, et les mêmes points créent une ambiance totalement différente.

Rendre les particules discrètes

La différence entre une atmosphère et un économiseur d’écran tient presque toujours à la quantité et à la vitesse. Ces réglages gardent les particules à l’arrière-plan, là où elles doivent être.

Variez la taille et l’opacité pour suggérer la profondeur : des particules petites, nettes et pâles semblent lointaines, et quelques-unes plus grandes et plus floues semblent proches de l’objectif. Les plus proches doivent aussi bouger un peu plus vite, la même astuce que celle de la parallaxe.

Particules et texte

Une poussière lumineuse qui traverse une lettre la fait scintiller, et tout un champ de particules rend les petits caractères difficiles à lire. Placez les mots dans une zone plus calme du cadre, éclaircissez les particules derrière eux, ou composez le texte assez grand pour qu’une poussière qui passe n’ait aucune importance. N’ajoutez jamais de halo derrière les mots pour les sauver : un fond plus calme fait mieux le travail. Le texte sur un dégradé traite du contraste sur les fonds animés.

Là où un effet de particules mérite sa place

Les particules récompensent les écrans que l’on regarde plus d’une seconde. Sur une publication que l’on fait défiler, elles passent presque inaperçues ; sur une story, un écran en boutique ou le hero d’un site, elles offrent à l’œil un point de repos discret.

• Fonds de Stories et de Reels, où un cadre plein écran reste affiché plusieurs secondes.
• Écrans sur place : menus affichés, écrans d’accueil et vitrines qui tournent en boucle toute la journée. Voir la vidéo d’ambiance.
• Heros de sites web, comme un calque léger sur un dégradé, arrêté pour les visiteurs qui préfèrent un mouvement réduit.
• Comptes à rebours d’événements et de lancements, où braises ou étoiles installent l’ambiance de la soirée elle-même.
• Fonds d’écran de téléphone et d’ordinateur, où une poussière ou des étoiles lentes ne lassent jamais. Voir le fond d’écran animé.

Boucler et exporter des effets de particules

1. 1

   Rendez la boucle sans raccord

   Les particules qui sortent par un bord doivent réapparaître par le bord opposé, pour que la dernière image s’enchaîne avec la première. Les boucles sans raccord explique la méthode.

2. 2

   Exportez en MP4, pas en GIF

   Le GIF n’a que 256 couleurs par image, et de minuscules points mobiles sur un dégradé doux se transforment en bruit moucheté. Le MP4 les gère bien mieux.

3. 3

   Donnez assez de qualité à la vidéo

   Les détails fins en mouvement sont difficiles à compresser. Si les particules bavent ou disparaissent, exportez en qualité supérieure ou réduisez leur nombre.

4. 4

   Vérifiez sur un téléphone

   Les plateformes recompressent les fichiers envoyés. Publiez d’abord en privé ou envoyez-la-vous, et assurez-vous que les particules ont survécu.

Le banding et les particules apparaissent souvent ensemble sur les fonds sombres ; le banding des dégradés donne les solutions. GIF ou MP4 explique pourquoi la vidéo l’emporte pour les détails en mouvement.

Un effet de particules en CSS et canvas

Sur un site web, un calque de particules léger se dessine idéalement dans un élément canvas placé sur le fond, avec pointer-events: none pour qu’il ne bloque jamais les clics. Ce script dessine une poussière qui dérive et respecte les visiteurs qui ont demandé moins de mouvement : ils voient les particules immobiles.

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

Gardez un nombre modeste sur téléphone, où chaque particule coûte de la batterie. Prefers reduced motion explique la media query en détail.

Les particules dans Gradiently

Dans Gradiently, les particules font partie d’un Mark : un grain fin qui dérive dans les couleurs propres du Mark, teinté pour s’y fondre plutôt que collé en blanc. Quand vous exportez une création animée avec Pro, vous pouvez garder ses particules, les désactiver ou essayer un autre style comme Poussière, Étoiles, Brume, Essaim, Soie ou Braises. Choisissez le mouvement Immobile et le fond reste fixe tandis que seules les particules bougent. Les boucles s’exportent sans raccord de 5 à 30 secondes, et un export fixe pose les particules exactement comme elles reposent dans la création.