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

Holographic surface studios

These sources define a reusable surface-workbench route rather than another animated-background shelf. The durable model separates substrate, finish, artwork, form, and export so a sticker, cloth, or rigid sheet does not collapse into one rainbow overlay.

HoloSticker implementation boundary

The pinned HoloSticker preview is an art-directed WebGL material, not a physical thin-film reference. Its fragment shader combines a sine-palette rainbow, procedural phase patterns, facet offsets, FBM pooling, hand-tuned Fresnel/environment reflection, flakes, and an ink-height normal perturbation. That is useful implementation evidence for controllable foil appearance. It must not be cited as a measured spectral model or used to override the separate Three.js/Khronos physical-material route above. Its GLB export does switch to a MeshPhysicalMaterial with iridescence IOR/thickness, but that simplified export does not preserve every custom preview channel, exploded layer, or shader behavior.

The most reusable subsystem is the source-to-form pipeline:

1. rasterize the selected artwork at a bounded working resolution;
2. compute an exact Euclidean distance field from alpha;
3. apply morphological closing for cut tolerance;
4. derive antialiased die-cut alpha, independent ink, foil blank, relief height, backing, and artwork maps;
5. deform a subdivided plane into a graded, direction-aware peel;
6. serialize settings separately from PNG, GIF/video, GLB, or React output.

Admit those patterns through a representative fixture suite, not by copying the 1,194-line renderer wholesale. The pinned repository has no tests. Its exact lockfile installs and the lint/build pass, but lint retains two Fast Refresh warnings, the production entry chunk is about 1.01 MB minified (285.5 kB gzip), and npm audit reports two fixable transitive findings under the shipped shadcn dependency. The preview and generated component run a perpetual requestAnimationFrame loop, use preserveDrawingBuffer, and expose no full renderer disposer; export methods do not restore the busy/canvas/render state in an internal finally if encoding fails. A production adoption therefore needs on-demand/visibility-aware rendering, complete GPU/bitmap disposal, context-loss recovery, export rollback tests, settings type/range validation, code splitting, and proof that the chosen output preserves the required channels. Source: jal-co/holosticker@34688eb; full source inspection and local npm ci, npm run lint, npm run build, npm audit, 2026-08-12

Material record model

Material Archiv's durable contribution is relational rather than visual. Its catalog separates materials, procedures, constructions, and applications; individual records then connect physical appearance and properties to processing and use. Surface tools should preserve that distinction:

• Render source owns the pixels or physical model: a CC0 PBR scan, procedural generator, or named shader implementation.
• Material record owns classification and selection context: family, process, properties, applications, and an attributed reference URL.
• Search should index both layers so queries such as conductive, embossing, upholstery, or technical textile can find an appropriate finish.
• Reference photography and descriptions are not texture assets. Rebuild appearance from licensed scans or an original procedural material and keep Material Archiv as the linked knowledge source.

This model was applied to Glyphfield's aluminum, textile, and leather presets and to an original procedural pressed-graphite study. The source records support the selection vocabulary while Glyphfield or the separately credited CC0 providers continue to own the rendered surface.

Workbench interaction rule

Use an outcome-first editor:

1. Choose Material, Cloth, or Sticker.
2. Choose a visual preset with source and license visible on the card or output panel.
3. Keep five essential finish controls visible beside the proof.
4. Treat color and artwork as separate, compact sections.
5. Collapse physics, microstructure, placement, and render/export details under Advanced.
6. Keep the proof large, zoomable, and directly interactive; cloth artwork must deform in shared UV space, while sticker artwork must participate in the die-cut silhouette.

HoloSticker's category-first artwork/finish flow is clearer than exposing every parameter at once. HoloCloth's small floating inspector is the stronger control-density reference: material essentials stay open while physics, images, and rendering are grouped and collapsible. The combined pattern is a preset library on one side, the proof in the middle, and a short essential inspector on the other.

Rendering boundaries

• Rigid material: prefer scanned CC0 PBR maps where possible; otherwise generate deterministic color/height textures and use physically based iridescence, anisotropy, sheen, clearcoat, roughness, and metalness.
• Cloth: keep deformation and artwork on the same subdivided geometry/UV field. A DOM logo floating above a WebGL cloth is not equivalent.
• Sticker: keep cutline, ink, foil, relief, edge, peel, and shadow as independently tunable channels.
• Runtime safety: static rigid proofs should render on demand; reserve continuous frames for deformable cloth and live foil. Handle WebGL context loss and retain a static/exportable fallback.
• License: MIT sources may be adapted with attribution. GPL examples may inform channel decomposition and interaction vocabulary only unless the resulting work is intentionally GPL-compatible.

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-08-12 | Deep-inspected all pinned HoloSticker implementation paths and calibrated the adoption boundary: artistic preview shader versus physical thin-film reference, exact-distance source-to-form pipeline, simplified GLB export, no test suite, passing lint/build with warnings, dependency findings, continuous-render/bundle cost, missing full disposal, and export-recovery requirements. Source: X 2084106996333048007; jal-co/holosticker@34688eb

• 2026-08-11 | Added Material Archiv as the specimen-record and selection-taxonomy source for Surface Lab: material family, process, properties, and applications are searchable metadata kept separate from render-source provenance. Recorded the reference-only photography/prose boundary and the first aluminum, textile, leather, and graphite applications. Source: User request, 2026-08-11; Material Archiv

• 2026-08-11 | Added the holographic surface-studio route from pinned HoloSticker and HoloCloth revisions, the Pokémon Cards CSS study-only channel model, and the Three.js/Khronos physically based iridescence standard. Defined the outcome-first workbench and license boundaries used for Glyphfield Surface Lab. Source: User request, 2026-08-11; repositories and official docs above

• 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