Shader Effects Libraries

Two complementary tools for adding shader-based visual effects to web projects without writing GLSL: Shader Gradient for animated 3D gradients, and Shaders.com for composable WebGPU components.

Design Position

For the broader effects/motion source shelf, start with Design Effects and Motion Sources. For component-source selection, start with Component Library Sources and Shaders.com. For engine/source selection across WebGL, Three.js, R3F, no-code WebGL, and asset/mockup tools, start with Web3D Library Ranking. This page owns shader-specific tools and adjacent shader-like visual processors.

Shader Gradient (shadergradient.co)

Visual editor for creating animated 3D gradient backgrounds. Customize shape, colors, motion, and camera view with real-time parameter tweaking. Exports to Framer, Figma, and React components. Primary use: hero sections, backgrounds, and decorative UI elements.

The library behind it is ruucm/shadergradient (@shadergradient/react, ~1.3k★, built on React Three Fiber): a declarative <ShaderGradient> inside <ShaderGradientCanvas> whose props (type plane/sphere/waterPlane, uSpeed/uStrength/uDensity, color1–3, envPreset, grain) map straight to GLSL uniforms — shader visuals without writing GLSL. v2 splits @shadergradient/react (renderer) from @shadergradient/ui (Framer/Figma controls); the .co editor exports a URL string you paste into props. Next.js 15 App Router needs R3F v9 + React 19. Source: github.com/ruucm/shadergradient, 2026-06-15

Kevin's 2026-06-25 design-folder preset is a slow, grain-enabled sphere with teal/orange/steel colors and an angled camera. Store the exact URL only in the sanitized raw note; use the page summary to recreate the direction without cluttering agent prompts with a huge query string. Source: raw/notes/design-folder-sites-2026-06-25.md

Shaders.com

See Shaders.com for the dedicated product page. In this shelf, Shaders.com is the component-library route for composable WebGPU effects and the entry point to agent-native preset search through Shaders MCP.

Use it when a web UI needs shader material as a component source, not when a flat CSS gradient or static texture would carry the design with less runtime risk.

Shader and effect discovery sources

Liquid metal & glass

Two shader effects that went viral in 2026, each with a dedicated tool page:

• Liquid Logo (Paper Shaders Liquid Metal) — Paper's LiquidMetal shader (@paper-design/shaders): turn a logo into animated liquid metal (the liquid.paper.design tool).
• Liquid Glass JS — dashersw/liquid-glass-js: a WebGL recreation of Apple's Liquid Glass (refraction/blur/masking). For the design-language trade-offs and the accessibility fault line, see Liquid Glass vs Flat 2026.

When to Use

Shader Gradient for quick animated backgrounds and hero sections. Shaders.com for richer composable effects when building interactive or immersive experiences. Both avoid the learning curve of raw GLSL/WGSL while preserving creative control. For agent-driven shader discovery and the Bolt/MCP/<DOMTexture> surfaces of Shaders.com, see Shaders MCP. For resolution-independent vector 3D (voxel scenes rendered to SVG, no WebGL) reach for Heerich.js instead of a shader pipeline. For exported content, social assets, 3D mockups, and illustration packs, use ContentCore or LS Graphics before introducing runtime WebGL.

Integrations

Bolt.new Connector (Shaders Pro, 2026-04-22)

Shaders.com shipped an official Bolt.new connector for Pro subscribers. In a Bolt project, the agent can search across hundreds of shader presets, install the chosen component, and customize parameters inline - no manual copy/paste of shader code. The connector turns Shaders.com into an agent-accessible preset library: prompt → preset search → install → ship. Source: Shaders.com announcement, 2026-04-22

Kevin has a Shaders Pro subscription, so this connector is available in his Bolt workflows. Source: User, 2026-04-22

Pattern worth noting: this is the same "agent-native" move that Paper Design Tool made with MCP - treating the design asset library as a tool surface an agent can call, rather than a site a human visits. Expect more component/asset libraries to ship Bolt/Cursor/Claude connectors this year.

---

Timeline

• 2026-07-06 | Added Web3D Library Ranking plus ContentCore and LS Graphics as asset/render/mockup sources adjacent to shader and Web3D routes. Source: User request, 2026-07-06
• 2026-07-01 | Design category refresh added this page to the Motion, effects, texture, and illustration family, linked it to Design System Map, and kept it standalone because Shader Effects Libraries owns a distinct design decision surface in this family. Source: User request, 2026-07-01
• 2026-06-30 | Added Unicorn Studio as a no-code WebGL/dither/mouse-trail prototype source after reviewing Oriku's artifact thread. Source: X/@Oriku175, 2026-06-24
• 2026-06-30 | Added Claude Fable 5 Drowned Spires II as a prompt-to-shader reference after reviewing the local artifact and Claude public artifact. Source: X/@emollick, 2026-06-09
• 2026-06-26 | Added Shaders.com as the dedicated product/source page and routed shader component selection through Component Library Sources as well as this shader shelf. Source: User request, 2026-06-26; https://shaders.com/
• 2026-06-25 | Added Kevin's design-folder shader/effects sources: React Bits Liquid Chrome, ShaderGradient saved preset, GSAP Showcase, Anime.js, Shader Lab, Shader Gallery, Dither, ASCII Magic, Heerich, and Charcuterie; linked the broader Design Effects and Motion Sources router. Source: raw/notes/design-folder-sites-2026-06-25.md
• 2026-04-22 | Shaders.com announced official Bolt.new connector for Shaders Pro users. Agent can search presets, install, and customize from a prompt. Kevin has Shaders Pro. Source: User relaying Shaders.com announcement, 2026-04-22
• 2026-04-06 | Page created from Obsidian clippings on Shader Gradient and Shaders.com. Source: compiled from raw/obsidian