ShaderGradient
Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
What it is
ShaderGradient renders animated, three-dimensional gradients with WebGL: waterfalls, planes and spheres of colour that drift and shift. Design it in the visual editor, then drop the same settings into React via the @shadergradient/react package (built on React Three Fiber), or use the Framer and Figma plugins. Open source under MIT.
Why it’s here
The good version of the animated-gradient hero. Keep the speed low and the colours close together and it reads as calm rather than loud. Check the compatibility notes: Next.js App Router needs React Three Fiber v9.
Best for
- hero backgrounds
- ambient motion
- brand moments
- Framer sites
Can my agent use this?
Agent excellent agent friendlinessYes. The README documents installation and the compatibility matrix, and the editor generates a shareable URL whose settings map directly onto component props. Design the gradient visually, then give your agent the URL and the install command.
Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods
- GitHub
- npm
- Docs
- Public website
Install
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controlsRelated resources
React Three Fiber 
React Three Fiber
Three.js as React components, with a huge helper ecosystem.
PackageFreeOpen sourceexcellent agent friendlinessLiquid Logo 
Liquid Logo
Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
ToolFreegood agent friendlinessStaff pickHaikei 
Haikei
Generate blobs, waves, gradients and patterns as SVG backgrounds.
ToolFreelimited agent friendlinessAceternity UI 
Aceternity UI
Showy, copy-paste React components for landing pages that need a moment.
Component librarygood agent friendliness