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.
excellent agent friendlinessPackageFreeOpen sourceLiquid Logo 
Liquid Logo
Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
good agent friendlinessToolFreeStaff pickAceternity UI 
Aceternity UI
Showy, copy-paste React components for landing pages that need a moment.
good agent friendlinessComponent libraryThinking Orbs 
Thinking Orbs
An animated orb that shows what your AI is doing: listening, thinking, searching, working.
excellent agent friendlinessPackageFreeStaff pick