GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Globe de particules 3D en WebGL v1.0.0
Utilisez cette ressource pour ajouter un globe de particules 3D à un héros de page web
Nouveau
- 322 téléchargements
- 217 mentions J'aime
- 143 sauvegardes
4,49 €
Accès à vie à cette ressource, avec ses mises à jour.
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install globe-particles-webglSans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.
Première fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent construit un globe en vraies particules Three.js : un cœur sphérique dense et un anneau orbital, avec un shader à points circulaires et un mélange additif. Il règle la densité, l'inclinaison et la couleur d'accent d'après la couleur principale de votre marque. Vous obtenez un composant prêt à intégrer, qui respecte « réduire les animations » et nettoie ses ressources.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Le modèle de votre agent
- Utilise
- Three.js
- Navigateur compatible WebGL
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md : recette complète (HTML, CSS, shaders, code Three.js), réglages, règles de goût et vérifications, traduit en français
- demo/index.html : page de démonstration à ouvrir pour voir le rendu attendu
- demo/PROMPT.md et source.json : demandes types pour recréer la démo
Pour qui
- Un héros de page d'accueil pour un produit d'infrastructure, de données ou de technologie
- Une page de lancement qui veut un visuel planétaire sombre et sobre
- Un fond animé léger pour une présentation en ligne
Pas pour qui
- Refaire toute une mise en page ou les textes d'une page
- Un ciel étoilé générique sans structure de globe
- Des sites visés par des appareils sans WebGL
Étiquettes
- webgl
- three.js
- particules
- globe
- page d'accueil
À propos
Vous dites
« Ajoute un globe de particules dans le héros de ma page, avec mon violet #8b5cf6 comme accent. »
Skill publiée par MengTo sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- La couleur principale de votre marque et Le projet web où intégrer le globe
- Dépendances
- Three.js et Navigateur compatible WebGL
Comment l'utiliser
- Installez la skill dans votre agent.
- Demandez le globe en donnant la couleur principale de votre marque.
- Ouvrez la page, ajustez la densité et la vitesse de rotation.
Aperçu du contenu
Fichiers
- demo/index.html46 Ko
- demo/preview.jpg56,6 Ko
- demo/PROMPT.md3,2 Ko
- demo/source.json4 Ko
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,4 Ko
- SKILL.md10,3 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- MengTo
- Source
- github.com/MengTo/Skills/tree/a45892d2fdadab75b31fb16abecc02f101b31c43/agent-skills/web-design/globe-particles
- Licence
- MIT
Notice
Version modifiée de « globe-particles » (MengTo, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Faut-il installer Three.js ?
Oui, le code importe le paquet « three » : installez-le dans votre projet avant d'intégrer le composant.
Le globe ralentit-il la page ?
Il suffit de baisser le nombre de particules ou de plafonner le ratio de pixels (maxDpr) ; la skill explique ces réglages.