Description
ShaderGradient is an open source React library that renders three-dimensional, animated gradient surfaces as WebGL shaders through Three.js. Two components form the foundation: ShaderGradientCanvas provides the rendering surface, and ShaderGradient inside it generates the actual gradient, controlled through a large set of typed properties for shape (plane, sphere, water plane), color, motion, camera position, and lighting. Since version 2, the core package @shadergradient/react deliberately limits itself to this renderer, without built-in state management; the stateless controls for Figma and Framer integrations live in a separate package, @shadergradient/ui, which is not distributed through npm but as an ESM bundle.
A prerequisite is an existing React project with Three.js, three-stdlib, and camera-controls as peer dependencies. Which version of react-three-fiber fits depends on the target environment: for the App Router in Next.js 15, react-three-fiber version 9 together with React 19 is mandatory, because version 8 is structurally incompatible with the React 19 canary bundled by Next.js. Anyone who needs interactive controls or presets must also bring in @shadergradient/ui or manage their own state, since the core renderer does not ship that on its own. On the framework side, the library is built for React; native support for Vue, Webflow, or Wix is not yet available, according to the project's own roadmap.
Compared with a static hero image or a plain CSS gradient, ShaderGradient delivers real, real-time-computed 3D motion in the browser, at the cost of a full Three.js render pipeline instead of a few lines of CSS. For standard landing pages without a specific need for motion, that overhead is rarely justified; for hero sections with an explicitly desired premium or editorial character, the library is instead one of the few ready-made solutions that produces animated 3D gradients without writing custom shader code. Outside of pure React code, the same gradients can also be used in design tools through the accompanying Figma plugin or the Framer component.
