ShaderGradient auf GitHub ansehen
ShaderGradient erzeugt anpassbare, bewegte 3D-Verläufe. Es gibt es als React-Paket, als Paket für Vue und Nuxt, als Figma-Plugin und als Framer-Komponente.
Es ist eine Code-Bibliothek, kein Agent-Skill: Dein KI-Agent schreibt den Code, der sie nutzt.
Laut README steht es unter der MIT-Lizenz, obwohl das Repository keine eigene Lizenzdatei hat. Am 28. Oktober 2026 hatte es auf GitHub rund 3.000 Sterne.
Was es tut
- Rendert den Verlauf als 3D-Form, als Fläche, Kugel oder Wasseroberfläche, sodass er sich bewegt und Licht einfängt.
- Du wählst drei Farben und stellst Geschwindigkeit, Stärke, Dichte, Körnung, Beleuchtung und Kamerawinkel ein.
- Du kannst einen Verlauf auf der ShaderGradient-Website gestalten und seine Einstellungen als Link kopieren. Die Komponente kann den Verlauf direkt aus diesem Link laden.
- Er kann erst laden, wenn der Verlauf ins Bild scrollt.
Was du vorher wissen solltest
Die React-Version baut auf React Three Fiber und Three.js auf und bringt damit eine 3D-Engine auf deine Seite. Das macht die Seite schwerer als ein einfacher CSS-Verlauf, also prüfe die Ladezeit, besonders auf Handys. Auch Versionen sind wichtig: Für den App Router von Next.js 15 musst du laut README React Three Fiber 9 mit React 19 verwenden.
So installierst du es
Für React installierst du das Paket und seine Peer-Abhängigkeiten:
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/threeGestalte dann einen Verlauf auf shadergradient.co, kopiere den Link und bitte deinen Agenten, ihn hinter deinen Hero-Bereich zu legen. Wer Figma oder Framer nutzt, kann stattdessen das Plugin und die Komponente verwenden, ganz ohne Code.