Apercu de l'effet de curseur
Plus bas = les particules restent plus longtemps
Copiez et collez ce code avant </body> dans votre site web.
| Effet | Visuel | Ideal Pour | Comportement |
|---|---|---|---|
| Etincelle | ✦ Points colores | Usage general, pages de destination SaaS | Les particules jaillissent radialement du curseur avec une legere gravite |
| Bulle | 🫧 Anneaux expansifs | Portfolios creatifs, sites pour enfants | Les bulles flottent vers le haut avec un reflet brillant |
| Etoile | ⭐ Etoiles a 5 branches | Sites de jeux, divertissement | Les etoiles tournent en s'eloignant du curseur |
| Coeur | ❤️ Formes de coeur | Sites de rencontres, pages de mariage, Saint-Valentin | Les coeurs tourbillonnent en rotation, reduisant leur taille en disparaissant |
| Trainee Neon | 💫 Anneaux lumineux | Startups technologiques, sites en mode sombre | Les anneaux s'elargissent avec un flou d'ombre, laissant une lueur neon |
| Flocon de Neige | ❄️ Cristaux a 6 branches | Themes hiver/fetes, pages saisonnieres | Les flocons tournent doucement en derivant dans des directions aleatoires |
Le code cree un element <canvas> fixe a la fenetre d'affichage avec pointer-events: none — ce qui signifie qu'il affiche des particules visuelles au-dessus de votre contenu sans bloquer les clics, les liens ou les interactions. A chaque evenement mousemove, il genere un nombre configurable de particules a la position du curseur avec des vecteurs de vitesse aleatoires. La boucle requestAnimationFrame met a jour les positions des particules (en ajoutant une legere gravite pour les effets etincelle/trainee), reduit l'opacite en fonction de la vitesse de fondu et supprime les particules mortes. Une limite de 300 particules empeche la croissance de la memoire. Le canvas se redimensionne automatiquement lors du redimensionnement de la fenetre, restant toujours en plein ecran.
| Plateforme | Methode d'Installation | Difficulte |
|---|---|---|
| WordPress | Apparence → Editeur de Fichiers du Theme → footer.php, ou utilisez le plugin "Insert Headers and Footers" | Facile |
| Shopify | Boutique en Ligne → Themes → Modifier le Code → theme.liquid, coller avant </body> | Facile |
| Wix | Parametres → Code Personnalise → Ajouter du Code, coller dans la section Body - End | Facile |
| Squarespace | Parametres → Avance → Injection de Code → Pied de page | Facile |
| Webflow | Parametres du Site → Code Personnalise → Avant la balise </body> | Facile |
| HTML Statique | Coller directement avant </body> dans n'importe quel fichier .html | Facile |
L'effet est concu pour la performance : tout le rendu utilise un seul element <canvas> avec un contexte 2D — pas de surcharge WebGL, pas de manipulation DOM par particule. Avec les parametres par defaut (3 particules par image, limite de 300), l'effet ajoute environ 1 a 2% d'utilisation du CPU sur le materiel moderne. Reduire le Nombre de Particules a 1 et augmenter la Vitesse de Fondu au maximum donne la configuration la plus legere. Le script fait environ 2 Ko minifie — plus petit que la plupart des extraits de suivi analytique.
Apres avoir colle le code, vous pouvez le personnaliser davantage directement : modifiez la valeur cfg.type pour changer d'effet sans regenerer, ajustez cfg.count pour plus ou moins de particules, ou modifiez le parametre cfg.spread pour changer la distance parcourue par les particules. Le code est en JavaScript vanilla — pas d'etape de compilation, pas de minification necessaire. Les utilisateurs avances peuvent etendre l'instruction switch pour ajouter des formes personnalisees : le contexte 2D du canvas prend en charge les arcs, les courbes de Bezier, les lignes et les sprites d'images.
Selectionnez votre effet prefere (etincelle, bulle, etoile, coeur, trainee neon ou flocon de neige), personnalisez les couleurs et la dynamique dans les controles, puis cliquez sur Copier le Code. Collez le script genere avant la balise </body> de n'importe quelle page HTML. Le code est entierement autonome — il cree un element canvas, ecoute les mouvements de la souris et rend les particules. Aucune dependance externe ni lien CDN requis.
L'effet ecoute les evenements mousemove, qui ne se declenchent pas sur les appareils tactiles. Sur mobile, la couche canvas reste presente mais est invisible (en raison de pointer-events: none), elle n'interfere donc pas avec les touchers, le defilement ou toute autre interaction de la page. L'effet est purement decoratif et se degrade correctement — votre site fonctionne normalement sur mobile sans la trainee de curseur.
L'effet utilise requestAnimationFrame et une limite de 300 objets de particules, ce qui le rend tres leger. Chaque particule est un seul appel de dessin canvas. Sur les appareils modernes, l'impact sur les performances est negligeable (environ 1 a 2% de CPU). Vous pouvez reduire le Nombre de Particules et la Taille dans les controles pour une utilisation des ressources encore plus faible sur le materiel plus ancien.
Oui — le code genere est du JavaScript vanilla sans dependances. WordPress : collez-le dans footer.php ou utilisez un plugin "Insert Headers and Footers". Shopify : ajoutez-le dans Theme → Modifier le Code → theme.liquid avant </body>. Wix : utilisez Parametres → Code Personnalise. Squarespace : Parametres → Injection de Code → Pied de page. Cela fonctionne sur toute plateforme autorisant le JavaScript personnalise. Consultez le tableau de compatibilite ci-dessus pour des instructions detaillees.
Utilisez les selecteurs de Couleur Primaire et Couleur Secondaire dans le panneau du generateur. Chaque particule selectionne aleatoirement l'une des deux couleurs, creant un effet dynamique et melange. Pour un rendu monochrome, definissez les deux couleurs sur la meme valeur. Le code genere integre directement les couleurs choisies — pas besoin de modifier le script apres l'avoir colle.