Qu'est-ce que Générateur d'effets de particules ?

Concevez et prévisualisez des animations de particules pour votre site web ou application. Configurez le nombre, la vitesse, la taille, la couleur, la forme, le comportement d'interaction et la physique pour créer des effets comme la neige, les confettis, les lucioles ou les motifs galactiques. Exportez la configuration sous forme de code prêt à l'emploi.

Le moteur sous-jacent est tsParticles, donc le JSON copié s'intègre tel quel dans un projet React, Vue ou JS classique. Les interactions souris et clic (repulse, grab, bubble, push, remove), le fondu d'opacité et l'animation de couleur (teinte) marchent sans config, et l'export HTML inclut le moteur via CDN, à coller dans une page statique sans étape de build. Vous pouvez aussi enregistrer l'aperçu en direct sous forme de GIF animé pour partager l'effet partout.

Comment utiliser

1. Choisissez un effet prédéfini (neige, confettis, lucioles, bulles, galaxie, réseau, feux d'artifice, feu, fumée) ou partez de zéro.
2. Affinez les propriétés des particules : nombre, vitesse, plage de taille, couleurs, formes, opacité et physique comme la gravité et le rebond.
3. Prévisualisez l'animation en direct, puis copiez la configuration JSON tsParticles, exportez-la comme extrait HTML autonome ou capturez l'aperçu sous forme de GIF animé.

Quand l'utiliser

• Ajouter une couche de neige ou de confettis sur une landing de fêtes ou de lancement produit.
• Prototyper l'arrière-plan d'une section hero SaaS avant de passer la main à la designer.
• Créer un fond galaxie ou lucioles pour un portfolio ou un menu de jeu.

Résultat

Un développeur web sélectionne le preset neige, augmente le nombre de particules à 200, ajoute une légère dérive de vent et copie le JSON de configuration pour ajouter un effet hivernal à sa page d'accueil de Noël.

FAQ

Le JSON exporté fonctionne dans n'importe quel framework ?

Oui. La config est compatible tsParticles, qui propose des bindings officiels pour React, Vue, Svelte, Angular et JS vanilla. Installe le wrapper correspondant, passe le JSON en options et l'effet rend exactement comme dans l'aperçu ici.

À partir de combien de particules ça commence à ramer ?

Sur un portable récent, 200 à 400 particules tournent à 60 fps. Au-delà de 500, les téléphones milieu de gamme accrochent. Les étoiles et polygones coûtent plus cher que les cercles à cause du path. Pour le mobile, reste entre 100 et 150 avec peu d'interaction.

Pourquoi l'animation rend différemment après export HTML ?

Le snippet HTML étire le canvas à la taille du conteneur parent. Si tu le colles dans un petit div, les particules s'entassent. Donne au wrapper une hauteur fixe (par exemple 100vh ou 400px) et le canvas s'adapte.

Je peux utiliser une image perso comme forme de particule ?

Pas depuis l'interface, mais le moteur le supporte. Exporte le JSON puis modifie shape.options.image pour pointer sur ton PNG ou SVG. L'image est rendue à la taille et opacité que la simulation attribue à chaque particule.

Est-ce que ça plombe les Core Web Vitals ?

Ça ajoute environ 30 à 80 Ko gzip pour le moteur plus le repaint continu du canvas. Pour préserver le score Lighthouse, baisse le nombre de particules et désactive l'interaction sur mobile. Charger le moteur en lazy après le hero garde un LCP propre.

Outils similaires