Voir ShaderGradient sur GitHub
ShaderGradient crée des dégradés 3D animés et personnalisables. Il existe en paquet React, en paquet Vue et Nuxt, en plugin Figma et en composant Framer.
C’est une bibliothèque de code, pas une skill d’agent : votre agent IA écrit le code qui l’utilise.
Le README indique qu’il est sous licence MIT, même si le dépôt n’a pas de fichier de licence séparé. Le 28 octobre 2026, il comptait environ 3 000 étoiles sur GitHub.
Ce qu'il fait
- Il rend le dégradé comme une forme 3D, un plan, une sphère ou une surface d’eau, pour qu’il bouge et capte la lumière.
- Vous choisissez trois couleurs et réglez la vitesse, l’intensité, la densité, le grain, l’éclairage et l’angle de caméra.
- Vous pouvez créer un dégradé sur le site de ShaderGradient et copier ses réglages sous forme de lien. Le composant peut charger le dégradé directement depuis ce lien.
- Il peut ne se charger que lorsque le dégradé apparaît à l’écran au défilement.
Ce qu’il faut savoir avant
La version React repose sur React Three Fiber et Three.js : elle ajoute donc un moteur 3D à votre page. La page devient plus lourde qu’avec un simple dégradé CSS, vérifiez donc sa vitesse de chargement, surtout sur mobile. Les versions comptent aussi : pour l’App Router de Next.js 15, le README indique qu’il faut React Three Fiber 9 avec React 19.
Comment l’installer
Pour React, installez le paquet et ses dépendances peer :
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/threeCréez ensuite un dégradé sur shadergradient.co, copiez le lien et demandez à votre agent de le placer derrière votre section d’accueil. Dans Figma ou Framer, vous pouvez utiliser le plugin et le composant à la place, sans code.