ShaderGradient

ShaderGradient ist eine quelloffene React-Bibliothek, die dreidimensionale, animierte Gradient-Flächen als WebGL-Shader über Three.js rendert. Zwei Komponenten bilden die Grundlage: ShaderGradientCanvas stellt die Rendering-Fläche bereit, ShaderGradient darin erzeugt den eigentlichen Gradient, gesteuert über eine große Zahl typisierter Properties für Form (Ebene, Kugel, Wasserfläche), Farbverlauf, Bewegung, Kameraposition und Licht. Seit Version 2 beschränkt sich das Kernpaket @shadergradient/react bewusst auf diesen Renderer, ohne eingebautes State-Management; die zustandslosen Steuerelemente für Figma- und Framer-Integrationen liegen in einem separaten Paket @shadergradient/ui, das nicht über npm, sondern als ESM-Bundle bereitsteht.

Voraussetzung ist ein bestehendes React-Projekt mit Three.js, three-stdlib und camera-controls als Peer-Dependencies. Welche Version von react-three-fiber dazu passt, hängt vom Zielrahmen ab: Für den App Router von Next.js 15 ist react-three-fiber in Version 9 zusammen mit React 19 Pflicht, weil Version 8 strukturell nicht mit dem von Next.js gebündelten React-19-Canary kompatibel ist. Wer interaktive Regler oder Presets braucht, muss zusätzlich @shadergradient/ui einbinden oder eigenen Zustand verwalten, denn der Kern-Renderer liefert dafür nichts mit. Frameworkseitig ist die Bibliothek auf React ausgelegt; native Unterstützung für Vue, Webflow oder Wix steht laut eigener Roadmap noch aus.

Gegenüber einem statischen Hero-Bild oder einem reinen CSS-Gradient liefert ShaderGradient echte, in Echtzeit berechnete 3D-Bewegung im Browser, dafür mit dem Gewicht einer vollen Three.js-Render-Pipeline statt weniger Zeilen CSS. Für Standard-Landingpages ohne besonderen Anspruch an Bewegtbild ist der Aufwand selten gerechtfertigt; für Hero-Bereiche mit explizit gewünschtem Premium- oder Editorial-Charakter ist die Bibliothek dagegen eine der wenigen fertigen Lösungen, die animierte 3D-Gradients liefert, ohne eigenen Shader-Code schreiben zu müssen. Außerhalb von reinem React-Code lassen sich dieselben Gradients über das begleitende Figma-Plugin oder die Framer-Komponente auch in Design-Tools einsetzen.

ShaderGradient steht unter der MIT-Lizenz kostenlos zur Verfügung, der Quellcode liegt öffentlich auf github.com/ruucm/shadergradient, das Kernpaket @shadergradient/react lässt sich über npm, yarn oder pnpm installieren, die Steuerelemente aus @shadergradient/ui werden als ESM-Bundle eingebunden. Für schnelles Ausprobieren ohne eigenen Code bietet die begleitende Website shadergradient.co/customize einen visuellen Konfigurator, aus dem sich eine fertige Konfigurations-URL übernehmen lässt, ergänzt um ein Figma-Plugin und eine Framer-Komponente für den Einsatz außerhalb von React. Vor dem produktiven Einsatz lohnt sich ein Blick auf Release-Historie und offene Issues auf GitHub.