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

[Canonical HTML page](https://gradiently.design/fr/guide/particles-effect)

Quelques grains de lumière qui dérivent peuvent faire d’un fond plat un lieu. Trop nombreux, ils évoquent un économiseur d’écran. Voici comment choisir, régler et exporter des particules pour qu’elles apportent de l’atmosphère, et rien d’autre.

## The short version

- Un effet de particules est une animation composée de nombreux petits points, chacun avec sa position, sa taille, sa vitesse et son opacité, comme de la poussière, des étincelles, des braises, de la neige ou des étoiles.
- Les particules sont les plus belles quand elles sont peu nombreuses, petites, lentes et de tailles variées, les plus grandes et les plus lumineuses étant utilisées avec parcimonie.
- Tenir les particules à l’écart du texte, ou les rendre plus calmes derrière lui, préserve la lisibilité.
- Les fines particules en mouvement sont difficiles à compresser en vidéo : exportez les boucles de particules en MP4 de bonne qualité plutôt qu’en GIF.
- Sur un site web, les animations de particules doivent s’arrêter pour les visiteurs qui demandent un mouvement réduit.

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.

| Style de particules | Mouvement | Ambiance | Idéal pour |
| --- | --- | --- | --- |
| Poussière | Minuscule, dérive lentement dans tous les sens | Calme, chaleureuse, cinématographique | Café, livres, intérieurs, marques sereines |
| Braises | Petites et vives, montent et s’estompent | Chaleureuse, énergique | Restaurants, musique, événements d’hiver |
| Étoiles | Immobiles ou presque, scintillent | Nuit, émerveillement | Soirées, astronomie, sommeil, lancements |
| Brume | Grande, douce, très pâle, glisse de côté | Mystérieuse, douce | Bien-être, beauté, parfum |
| Essaim | Se déplace en groupes lâches | Vivante, affairée | Tech, données, nature |
| Neige | Tombe régulièrement avec un léger balancement | Saisonnière, douillette | Campagnes d’hiver, publications des fêtes |

Six styles de particules et leur place. Choisissez le mouvement qui correspond à l’émotion, pas celui qui impressionne le plus.

## 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.

### Économiseur d’écran

- Des centaines de gros points lumineux
- Tous de la même taille et à la même vitesse
- Un mouvement rapide et agité
- Du blanc pur sur tous les fonds
- Qui traversent le titre de part en part

### Atmosphère

- Un nombre modeste, surtout minuscules
- Des tailles mêlées : beaucoup de petites, quelques-unes plus grandes et plus douces
- Assez lentes pour qu’il faille regarder deux fois
- Teintées des couleurs du fond lui-même
- Plus rares ou plus calmes là où se trouvent les mots

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](https://gradiently.design/fr/guide/parallax-effect).

- Sol calciné: #1a0f0a
- Rouille profonde: #7c2d12
- Braise: #ea580c
- Étincelle: #fdba74
- Cœur ardent: #fff7ed

Une palette de braises. Les particules prennent les deux tons les plus clairs, pour rayonner comme une partie du fond plutôt que de s’y poser en blanc.

## 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é](https://gradiently.design/fr/guide/text-on-gradient) traite du contraste sur les fonds animés.

Une publication d’événement en portrait qui annonce un dîner de Bonfire Night le 5 novembre, sur un fond sombre et chaud avec des particules de braise

Les braises conviennent à un événement du soir : des poussières chaudes qui montent lentement sur un fond sombre, avec la date dans la zone calme du haut.

Une story verticale qui dit Matins tranquilles pour un café appelé The Reading Room, avec de légères particules de poussière dans une lumière douce

De la poussière pour la story d’un café : à peine visible, elle accroche la lumière sans jamais traverser les mots.

## 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](https://gradiently.design/fr/guide/ambient-video).
- **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é](https://gradiently.design/fr/guide/live-wallpaper).

## Boucler et exporter des effets de particules

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](https://gradiently.design/fr/guide/seamless-loop-video) explique la méthode.
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. **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. **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](https://gradiently.design/fr/guide/gradient-banding) donne les solutions. [GIF ou MP4](https://gradiently.design/fr/guide/gif-vs-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.

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

Soixante-dix grains de poussière chaude qui montent lentement. Donnez au canvas `position: absolute; inset: 0; pointer-events: none;` au-dessus de votre hero.

Gardez un nombre modeste sur téléphone, où chaque particule coûte de la batterie. [Prefers reduced motion](https://gradiently.design/fr/guide/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.

## FAQ

### Qu’est-ce qu’un effet de particules ?

Une animation composée de nombreux petits points qui bougent indépendamment, utilisée pour créer poussière, étincelles, braises, neige, étoiles ou brume dans une création ou une vidéo.

### Comment rendre un effet de particules discret ?

Utilisez moins de particules, surtout minuscules, lentes, de tailles mêlées et teintées des couleurs du fond, et rendez-les plus calmes derrière le texte.

### Faut-il exporter une animation de particules en GIF ou en MP4 ?

En MP4. Le GIF est limité à 256 couleurs par image, donc les fines particules sur un dégradé deviennent un bruit moucheté, alors que le MP4 les garde fluides.

### Peut-on créer un effet de particules en CSS ?

Quelques particules peuvent s’animer en CSS, mais un élément canvas avec un peu de JavaScript en gère des dizaines ou des centaines bien plus efficacement. Arrêtez le mouvement pour les visiteurs qui préfèrent un mouvement réduit.