Shader Lab
Browser shader compositor with a WebGPU React runtime for export
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.
npm install @basementstudio/shader-lab threeUse 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.
- 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
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.
