Bac à sable particles.js — éditeur et générateur de configuration en direct

Modifiez une configuration particles.js avec des réglages ou en JSON brut, regardez-la tourner en direct, et copiez le JSON ou un extrait HTML prêt à coller.

Un problème, ou quelque chose à améliorer ? Nous lisons chaque message et corrigeons vite.

Ce bac à sable particles.js est un éditeur et générateur en direct de configurations particles.js. Modifiez le nombre de particules, leurs couleurs et leurs formes, les lignes de liaison, le mouvement et les effets au survol et au clic avec les réglages, ou modifiez directement la configuration JSON complète : l’aperçu se relance pendant la saisie. Les deux vues modifient la même configuration : vous pouvez dégrossir avec les curseurs et peaufiner en JSON. Quand le résultat vous convient, copiez le JSON ou un extrait HTML complet avec la balise script et l’appel particlesJS().

L’aperçu utilise la vraie bibliothèque particles.js 2.0.0, pas une imitation : ce que vous voyez est ce que votre page affichera, bizarreries comprises. Seules les couleurs hexadécimales sont acceptées, le nombre de particules varie avec la taille du canvas quand la densité est activée, et les lignes de liaison deviennent vite coûteuses. Le compteur d’images par seconde (i/s) vous aide à juger une configuration avant de la livrer sur des téléphones. particles.js n’a pas été mis à jour depuis la version 2.0.0 de 2015 ; il fonctionne toujours dans les navigateurs actuels, et les notes ci-dessous expliquent quand tsParticles, son successeur maintenu, est le meilleur choix.

Mode d’emploi

Choisissez un préréglage de départ, ou collez votre propre configuration dans l’éditeur JSON (un particlesjs-config.json, un appel particlesJS("particles-js", {...}) ou un simple objet fonctionnent tous). Vous pouvez aussi déposer un fichier .json sur l’outil.
Ajustez la configuration dans l’onglet Réglages : nombre et densité des particules, couleurs, forme, opacité, taille, lignes de liaison, mouvement et interactivité. Ou modifiez directement le JSON : les erreurs s’affichent sous l’éditeur et l’aperçu conserve la dernière configuration valide.
Réglez la couleur ou l’image d’arrière-plan de l’aperçu pour qu’elle corresponde à votre page, puis survolez et cliquez l’aperçu pour tester l’interactivité. Utilisez Agrandir ou Plein écran pour le voir en taille réelle, et surveillez le compteur d’i/s.
Choisissez une sortie : l’extrait HTML, la variante particlesJS.load, un composant React ou la configuration JSON. Choisissez si le conteneur est un arrière-plan pleine page ou s’il remplit un élément parent.
Copiez-la ou téléchargez-la, et collez l’extrait HTML juste avant la balise fermante </body> de votre page.

Questions fréquentes

Comment ajouter particles.js à mon site web ?

Ajoutez un élément vide avec un id, comme <div id="particles-js"></div>, donnez-lui une taille en CSS, chargez la bibliothèque avec une balise script (jsDelivr la sert à l’adresse cdn.jsdelivr.net/npm/ suivie de particles.js@2.0.0/particles.min.js), et appelez particlesJS("particles-js", { ...config }) avec cet id et votre configuration. Le script doit s’exécuter après la création de l’élément : placez-le juste avant </body>. La cause la plus fréquente d’un résultat vide est un conteneur sans hauteur : particles.js dimensionne son canvas d’après l’élément, donc un div de hauteur 0 donne un canvas de hauteur 0. L’extrait HTML de cet outil inclut le CSS pour un arrière-plan pleine page ou pour remplir un élément parent.

Comment utiliser particles.js avec React ou Next.js ?

Installez-le avec npm install particles.js, puis importez-le dans useEffect pour qu’il ne s’exécute que dans le navigateur (il utilise window, donc l’importer au niveau supérieur casse le rendu côté serveur de Next.js). Appelez window.particlesJS("particles-js", config) une fois l’élément rendu, et faites le ménage quand le composant est démonté : appelez pJS.fn.vendors.destroypJS() sur chaque entrée de window.pJSDom et remettez window.pJSDom à un tableau vide, sinon la boucle d’animation continue et le montage suivant échoue. La sortie React / Next.js proposée ici est un composant qui fait tout cela. Pour un nouveau projet React, le paquet maintenu @tsparticles/react est un choix plus naturel.

particles.js est-il encore maintenu ? particles.js ou tsParticles

Non. particles.js, de Vincent Garreau, s’est arrêté à la version 2.0.0, publiée en 2015, et son dépôt n’a connu aucune version depuis. Il fonctionne toujours dans les navigateurs actuels, car il n’utilise que canvas et requestAnimationFrame, et de nombreux sites l’emploient. tsParticles, de Matteo Bruni, a commencé comme un portage en TypeScript et en est le successeur activement maintenu : plus de formes et d’effets, des composants officiels React, Vue, Angular et Svelte, de meilleures options de performances, et il sait lire la plupart des options de particles.js. Utilisez particles.js pour un arrière-plan rapide et sans dépendance sur une page statique ; choisissez tsParticles pour une application à base de framework ou pour tout ce que vous maintiendrez pendant des années.

particles.js ralentit-il un site web sur mobile ?

Cela peut arriver. Chaque particule est redessinée à chaque image et, avec les lignes de liaison activées, la distance de chaque particule est comparée à toutes les autres : le coût croît donc avec le carré du nombre de particules. retina_detect double ou triple les pixels dessinés sur les téléphones à haute densité. Pour garder de la fluidité : laissez la densité activée pour que les petits écrans aient moins de particules, restez sous environ 100 particules quand les lignes sont activées, désactivez les lignes ou retina_detect si le nombre d’i/s chute, et n’initialisez pas particles.js quand le visiteur a activé prefers-reduced-motion. Les navigateurs mettent en pause requestAnimationFrame dans les onglets en arrière-plan : cela ne coûte rien quand l’onglet est masqué.

Pourquoi mon arrière-plan particles.js ne s’affiche-t-il pas ?

Vérifiez dans l’ordre : le conteneur a une vraie hauteur (height: 100% ne fonctionne que si son parent a aussi une hauteur, c’est pourquoi l’extrait utilise position: fixed ou absolute) ; l’appel particlesJS s’exécute après la création de l’élément ; la couleur des particules diffère de celle de l’arrière-plan ; aucun autre contenu ne le recouvre avec un fond opaque ; et la console du navigateur n’affiche aucune erreur. Avec particlesJS.load, la page doit être servie en http(s), car le chargement du fichier JSON depuis file:// est bloqué. Une couleur écrite sous forme de nom ou de rgb() au lieu de l’hexadécimal empêche aussi particles.js de dessiner ; cet outil le signale.

particles.js peut-il utiliser une image ou une forme personnalisée ?

Oui. Définissez shape.type sur "image" et shape.image.src sur l’URL de l’image ; width et height fixent son rapport d’aspect, et l’option size la taille à laquelle elle est dessinée. Les PNG, JPG, GIF et WebP se chargent comme des images ordinaires. Les fichiers SVG sont téléchargés avec XMLHttpRequest pour que leur couleur puisse être remplacée : le serveur qui héberge le SVG doit donc autoriser les requêtes cross-origin. En plus des images, les formes intégrées sont circle, edge (un carré), triangle, polygon et star, polygon.nb_sides définissant le nombre de côtés ou de branches de l’étoile. Un tableau de formes attribue une forme aléatoire à chaque particule.

Référence de configuration particles.js : les options qui comptent

Une configuration particles.js comporte trois clés de premier niveau : particles (ce qui est dessiné et comment cela bouge), interactivity (la réaction à la souris) et retina_detect. Toute clé omise reprend la valeur par défaut de la bibliothèque, et ces valeurs par défaut sont lourdes : 400 particules de rayon 20 avec les lignes activées. Une configuration qui ne définit qu’une couleur ne ressemble donc pas à la démo.

• particles.number.value et density : avec density.enable activé, value est le nombre pour une surface de value_area × 1000 pixels carrés, et le nombre réel varie avec le canvas. 80 particules avec value_area 800 donnent environ 200 particules sur un écran 1920×1080 et quelques dizaines sur un téléphone.

• particles.color.value : une chaîne hexadécimale, un tableau de chaînes hexadécimales (chaque particule en choisit une), "random" ou un objet {r, g, b}. Les couleurs nommées et les chaînes rgb() ne sont pas prises en charge et arrêtent l’animation.

• particles.shape.type : circle, edge, triangle, polygon, star ou image, ou un tableau de ces valeurs. stroke ajoute un contour ; polygon.nb_sides définit le nombre de côtés pour polygon et de branches pour star.

• opacity et size : value est le maximum, random tire pour chaque particule une valeur entre 0 et ce maximum, et anim les fait pulser entre opacity_min / size_min et la valeur, à la vitesse indiquée.

• line_linked : des lignes entre les particules plus proches que distance pixels, qui s’estompent avec la distance. Sa couleur doit être une seule valeur hexadécimale.

• move : speed, direction (none ou l’une des huit directions), random (vitesses variées), straight (sans dérive), out_mode (out fait réapparaître de l’autre côté, bounce rebondit sur les bords), bounce (les particules entrent en collision entre elles) et attract.

• interactivity.events : les modes onhover grab (trace des lignes vers le curseur), bubble (grossit ou s’estompe à proximité) et repulse (repousse) ; les modes onclick push (ajoute des particules), remove, bubble et repulse. Leur intensité se règle dans interactivity.modes. detect_on vaut canvas par défaut ; window le fait réagir même quand du contenu recouvre le canvas, en utilisant les coordonnées de la fenêtre.

Installer particles.js : CDN, npm ou auto-hébergement

Depuis un CDN : une balise script dont le src est cdn.jsdelivr.net/npm/ suivi de particles.js@2.0.0/particles.min.js (l’extrait HTML ci-dessus contient la balise complète). Fixez la version ainsi plutôt que d’utiliser @latest. Le paquet npm ne contient que le particles.js non minifié ; jsDelivr génère le fichier .min.js (environ 23 Ko) à la demande, et comme il est généré, jsDelivr déconseille d’y ajouter un hachage d’intégrité SRI.

Avec npm : npm install particles.js@2.0.0, puis import "particles.js" dans le code côté client. Le paquet n’exporte rien ; son import définit window.particlesJS et window.pJSDom. Il n’est livré avec aucun type TypeScript : les projets TypeScript ont besoin d’une ligne declare module "particles.js" et doivent l’appeler via window.

Auto-hébergement : copiez particles.js depuis le paquet npm (ou le fichier minifié depuis jsDelivr) dans vos fichiers statiques et faites pointer la balise script dessus. La bibliothèque n’utilise pas eval : elle fonctionne donc avec une Content-Security-Policy stricte qui autorise vos propres scripts ; une forme image a besoin de son hôte dans img-src, et les images SVG ou particlesJS.load ont aussi besoin de l’hôte dans connect-src.

particles.js est sous licence MIT : vous pouvez l’utiliser dans des projets commerciaux tant que la mention de licence reste dans le fichier.

Un arrière-plan à particules rapide et accessible

Un arrière-plan animé est une décoration : il ne doit jamais gêner. Respectez la réduction des animations en ne le lançant que si le visiteur n’a pas demandé moins de mouvement : if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config). Vous pouvez aussi le garder mais régler move.enable sur false, ce qui dessine une seule image fixe.

Gardez le texte lisible : vérifiez la couleur du texte par rapport à l’arrière-plan et aux couleurs des particules et des lignes, et ajoutez si besoin un calque semi-transparent sous le texte. Placez le contenu au-dessus du canvas avec position: relative et un z-index plus élevé, et si le canvas ne doit pas capter les clics, donnez-lui pointer-events: none et utilisez detect_on: "window" pour les effets au survol.

Testez sur un vrai téléphone. Le compteur d’i/s de ce bac à sable mesure votre ordinateur, et un téléphone milieu de gamme peut n’en atteindre que le tiers. Réduire le nombre de particules, augmenter value_area, désactiver retina_detect et désactiver les lignes de liaison sont, dans cet ordre, les changements les plus efficaces.

Outils gratuits similaires

Générateur de dégradés CSS — Créez des dégradés linéaires, radiaux et coniques avec des arrêts de couleur déplaçables, un cadran d’angle et des préréglages. Copiez le CSS ou une classe Tailwind.
Générateur de box-shadow — Créez des effets box-shadow et text-shadow en plusieurs couches avec aperçu en direct et préréglages élévation, néomorphisme et lueur, puis copiez le CSS.
Formateur JSON — Indentez, minifiez et validez du JSON, avec les erreurs d’analyse localisées par ligne et colonne. Dans votre navigateur, sans envoi.
Générateur de palette de couleurs — Appuyez sur la barre d’espace pour une nouvelle palette, verrouillez les couleurs qui vous plaisent, choisissez une harmonie ou tirez la palette d’une photo. Export en CSS, Tailwind, SCSS, JSON ou PNG.
Éditeur SVG — Dessinez formes, flèches, traits à main levée et texte sur un canevas, puis téléchargez un SVG propre ou un PNG. Gratuit, dans votre navigateur, sans inscription.