Shader Lab

Browser shader compositor with a WebGPU React runtime for export

Tier S · Best in classToolShader PackAnimation Libraryeng.basement.studio

(Visit eng.basement.studio ↗)(Docs)(Repository)

Shader Lab from basement.studio is a layer-based shader editor in the browser plus a matching npm runtime. You stack effect layers on a timeline, keyframe any parameter or bind it to audio, then take the composition into your own app through @basementstudio/shader-lab. The runtime renders a composition directly in React, feeds it into a Three.js scene as a texture, or runs the effect layers as post-processing over an existing scene. Apache-2.0, WebGPU-only.

Install

npm install @basementstudio/shader-lab three

For an agent

Use this when a marketing hero or background needs a real-time effect that a CSS gradient cannot fake — CRT, dithering, halftone, ASCII, pixel sorting, displacement — and you want the art direction dialled in visually rather than by hand-tuning uniforms. The hard constraint is WebGPU: it will not run in Safari-without-flags or any WebGL-only browser, so always ship a static poster fallback and gate on navigator.gpu. Prefer useShaderLab over the low-level source APIs unless you need manual timing, and remember post-processing must share the same WebGPURenderer as the scene you pass in.

Why it is here. Most shader tools are either a playground you cannot export from or a library with no authoring UI; this is both halves of the loop from a studio that ships this kind of work commercially. Apache-2.0 on a WebGPU compositor of this quality is unusual.

Install command, framework, licence and component list.

Facts

License: Apache 2.0
Pricing: Free, Open source
Framework: React, Vanilla JS
Styling: Shader / GLSL
Distribution: Web app / online tool, npm package, GitHub repository
Platform: Web
Content type: Code, 3D assets and scenes
Agent readiness: Readable open source, Structured documentation
Accessibility: Known accessibility gaps
Maturity: Actively maintained
GitHub stars: 669
Package: @basementstudio/shader-lab

Components it ships

Gradient Background Particle Background Text Effect Animation

Helps you build

Homepage

Notable for

16 effect layers incl. ASCII, CRT, halftone, pixel sorting, ink
Timeline keyframing and audio-linked parameters
Editor export runs as a React component
Three modes: render, texture, post-processing
Blob tracking with nestable inner effects
Apache-2.0, WebGPU + Three.js TSL

Provenance

Verified 2026-08-15. HTTP 200. https://eng.basement.studio/tools/shader-lab (WebFetch plus raw curl — read the live editor UI: layers CRT, Dithering, Text, Pattern, Gradient and the full CRT parameter tree across General/Settings/Distortion/Phosphor/Noise/Bloom), https://github.com/basementstudio/shader-lab, https://raw.githubusercontent.com/basementstudio/shader-lab/main/README.md (full effect-layer list, install command, API exports, WebGPU requirement), https://api.github.com/repos/basementstudio/shader-lab (669 stars, Apache-2.0, pushed 2026-08-14). npmjs.com returned 403.

Also in Textures, Backgrounds & Assets

eng.basement.studioTier S