ruucm/shadergradient

Health v2 · maintenance only

Flags: no_releases no_license

Adoption not part of the score

2142 stars · 116 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

ShaderGradient is a React library built on Three.js and react-three-fiber that renders customizable, animated 3D moving gradients. It also ships as a Figma plugin and a Framer component, letting designers embed the same gradients in design tools.

Use cases

• add animated 3D gradient backgrounds to a React or Next.js site
• create moving gradient hero sections with WebGL shaders
• use the same animated gradient in Figma and Framer designs
• customize gradient colors, speed, and distortion via props or query strings
• render shader-based backgrounds without writing GLSL

When to choose

• you want beautiful animated gradients in React with Three.js under the hood
• you need design-tool parity across Figma, Framer, and code
• you prefer declarative props over hand-writing shader code

When to avoid

• you need a static gradient image or CSS-only solution
• your project cannot take WebGL or Three.js dependencies
• you rely on the legacy v1 bundled store/UI (use shadergradient-old instead)

Facets

library · maturity active

graphics animation ui-components web-framework web-development frontend graphics web-design browser threejs react-three-fiber glsl-shaders gradient figma-plugin framer 3d-graphics typescript web-server nodejs

Member repositories

For agents

markdown · JSON · MCP: product_card(name="ruucm/shadergradient")