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
Fonds animés WebGL avec Vanta.js v1.0.0
Utilisez cette ressource pour ajouter un fond animé WebGL derrière une section d'accueil
Nouveau
- 370 téléchargements
- 206 mentions J'aime
- 107 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install vanta-animated-backgroundsSans 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 installe un effet Vanta.js dans un conteneur de votre page, règle les couleurs et les paramètres, puis prévoit le nettoyage pour les sites React ou Next.js. La skill rappelle les pièges fréquents : conteneur sans taille, trop de canvas WebGL, appareils mobiles faibles. Vous obtenez un fond vivant qui reste lisible et léger.
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
- 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 traduit en français : fonctionnement, API (init, setOptions, resize, destroy), pièges et recette de démarrage
- REFERENCES.md : liens vers le dépôt et la galerie de Vanta.js
- demo/index.html : page de démonstration autonome avec bandes ondulées animées
- demo/preview.jpg : aperçu de la démo
Pour qui
- Donner de l'ambiance à la section d'accueil d'une page de lancement
- Ajouter un fond animé aux couleurs de votre marque
- Intégrer proprement l'effet dans un projet React ou Next.js
Pas pour qui
- Créer une vraie scène 3D interactive
- Animer des éléments au premier plan ou des textes
- Sites qui doivent rester très légers sur de vieux mobiles sans solution de repli
Étiquettes
- webgl
- arrière-plan
- animation
- page d'accueil
- three.js
À propos
Vous dites
« Ajoute un fond animé de vagues bleu nuit derrière la section d'accueil de ma page, avec un repli en couleur unie sur mobile. »
Skill publiée par MengTo sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Le choix de l'effet et vos couleurs de marque et Une page ou un projet web existant
- Dépendances
- Navigateur compatible WebGL
Comment l'utiliser
- Installez la skill dans le dossier de skills de votre agent.
- Demandez l'effet voulu (vagues, oiseaux, brouillard, réseau) et vos couleurs de marque.
- Vérifiez la lisibilité du texte et le rendu sur mobile, puis ajustez les paramètres.
Aperçu du contenu
Fichiers
- demo/index.html15,8 Ko
- demo/preview.jpg38,6 Ko
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,4 Ko
- REFERENCES.md0,1 Ko
- SKILL.md2,6 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- MengTo
- Source
- github.com/MengTo/Skills/tree/a45892d2fdadab75b31fb16abecc02f101b31c43/agent-skills/web-design/vantajs
- Licence
- MIT
Notice
Version modifiée de « vantajs » (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 un paquet ?
Non pour un site statique : la recette charge three.js et l'effet Vanta depuis un CDN. Dans un projet avec bundler, three.js peut devoir être fourni explicitement.
L'effet ralentit-il la page ?
Il utilise le GPU. Limitez-vous à un ou deux effets par page et prévoyez un fond de repli pour les petits écrans.