# Shader Lab

> Shader Lab is a free browser-based editor by basement.studio for creating, stacking, and animating shader effects on images, video, text, and 3D models. It runs on WebGPU, supports custom TSL shaders compiled in the browser, exports video, and has a community gallery where every published scene can be opened and remixed. Scenes can also be embedded in any React site with the open-source runtime, and AI agents can drive the editor through an MCP server.

## Key pages

- [Editor](https://eng.basement.studio/tools/shader-lab): The Shader Lab editor itself — start creating immediately, no account needed.
- [About](https://eng.basement.studio/tools/shader-lab/about): What Shader Lab is, how the editor works, the full effect catalog, and an FAQ.
- [Community](https://eng.basement.studio/tools/shader-lab/community): Gallery of published scenes — every one can be opened and remixed. Filterable by effect via ?effect=<name>.
- [Effects index](https://eng.basement.studio/tools/shader-lab/community/effects): One landing page per effect, each with a description, example image, and the community scenes using it.
- [Privacy policy](https://eng.basement.studio/tools/shader-lab/privacy): What Shader Lab stores, who processes it, and how to have it deleted.

## Effects

- [Annotations](https://eng.basement.studio/tools/shader-lab/community/effects/annotations): Technical overlay marks: target rings, crosshairs, boxes, rulers, connectors and readouts, placed along edges, at random or where you paint. Purely decorative.
- [ASCII](https://eng.basement.studio/tools/shader-lab/community/effects/ascii): Redraws the image as text characters, like an old terminal.
- [Blob Tracking](https://eng.basement.studio/tools/shader-lab/community/effects/blob-tracking): Finds moving regions and frames them with CCTV-style boxes, brackets and labels. Labels are decorative, not real recognition.
- [Bloom](https://eng.basement.studio/tools/shader-lab/community/effects/bloom): Makes bright areas glow and bleed into their surroundings.
- [Blur](https://eng.basement.studio/tools/shader-lab/community/effects/focus-blur): Blur that varies across the frame: depth of field, tilt-shift, radial focus or tone-based, with Gaussian, lens bokeh or motion streaks.
- [Chromatic Aberration](https://eng.basement.studio/tools/shader-lab/community/effects/chromatic-aberration): Splits the color channels apart for lens fringing.
- [Circuit Bent](https://eng.basement.studio/tools/shader-lab/community/effects/circuit-bent): Turns the image into scanlines and bends them around a point that pulls or pushes.
- [Connected Dots](https://eng.basement.studio/tools/shader-lab/community/effects/connected-dots): Turns the image into points linked to their neighbors: tone graphs, ink blobs or fading plexus lines. Points can drift so links form and break.
- [CRT](https://eng.basement.studio/tools/shader-lab/community/effects/crt): An old CRT screen: scanlines, phosphor glow and signal noise.
- [Displaced Rings](https://eng.basement.studio/tools/shader-lab/community/effects/displaced-rings): Cuts the image into concentric rings or half-discs and shifts each one.
- [Displacement Map](https://eng.basement.studio/tools/shader-lab/community/effects/displacement-map): Warps the image by pushing pixels according to brightness.
- [Dithering](https://eng.basement.studio/tools/shader-lab/community/effects/dithering): Reduces the image to a few colors with ordered or textured dithering patterns.
- [Dot Grid](https://eng.basement.studio/tools/shader-lab/community/effects/dot-grid): A precise grid of dots locked to the artboard, each sized by the tone beneath it.
- [Edge Detect](https://eng.basement.studio/tools/shader-lab/community/effects/edge-detect): Finds edges in the image and draws them as outlines.
- [Erosion](https://eng.basement.studio/tools/shader-lab/community/effects/erosion): Crumbles the image into speckle along edges, tones or a cutout's border, throwing fragments outward.
- [Flares](https://eng.basement.studio/tools/shader-lab/community/effects/flares): Light flares on the brightest points: crosses, stars, starbursts or anamorphic streaks.
- [Glass](https://eng.basement.studio/tools/shader-lab/community/effects/glass): Textured glass in front of the image: reeded, hammered, pyramid, hex or frosted. Every cell acts as a small lens.
- [Gradient Map](https://eng.basement.studio/tools/shader-lab/community/effects/gradient-map): Recolors the image by brightness using a color ramp you edit.
- [Grain](https://eng.basement.studio/tools/shader-lab/community/effects/grain): Film grain for photos and video, from fine 35mm to pushed 16mm. It can change every frame, like real film.
- [Halftone](https://eng.basement.studio/tools/shader-lab/community/effects/halftone): Turns the image into printed dot screens.
- [Ink](https://eng.basement.studio/tools/shader-lab/community/effects/ink): Smeared glow and fluid bleed for neon, ink-like edges.
- [Lumen Print](https://eng.basement.studio/tools/shader-lab/community/effects/lumen-print): An analog sun print: toned shadows, solarized highlights, halation, burned edges and grain.
- [Outline](https://eng.basement.studio/tools/shader-lab/community/effects/outline): Draws outlines around text, cutouts or the shapes in the image: solid, double, dashed or scalloped, repeated as rings.
- [Particle Grid](https://eng.basement.studio/tools/shader-lab/community/effects/particle-grid): Breaks the image into a grid of glowing particles.
- [Pattern](https://eng.basement.studio/tools/shader-lab/community/effects/pattern): Rebuilds the image from repeating graphic patterns, light to dark.
- [Photocopy](https://eng.basement.studio/tools/shader-lab/community/effects/photocopy): A worn photocopy: crushed toner, speckle, streaks, misregistration and folds. Copies of copies degrade further.
- [Photographic Cells](https://eng.basement.studio/tools/shader-lab/community/effects/photographic-cells): Reveals the photo through a grid of cells joined into regions, with stepped edges and outlines.
- [Pixel Sorting](https://eng.basement.studio/tools/shader-lab/community/effects/pixel-sorting): Sorts pixels into streaks by brightness or color.
- [Pixelation](https://eng.basement.studio/tools/shader-lab/community/effects/pixelation): Turns the image into large square pixels.
- [Plotter](https://eng.basement.studio/tools/shader-lab/community/effects/plotter): Redraws the image as a pen plotter would: hatching, flow lines, contours, squiggles, a spiral or stipple.
- [Posterize](https://eng.basement.studio/tools/shader-lab/community/effects/posterize): Flattens the image into a few bands of color.
- [Relief](https://eng.basement.studio/tools/shader-lab/community/effects/relief): Embosses or debosses the image into a lit surface: silver plate, letterpress, blind emboss or gold foil.
- [Signal Rot](https://eng.basement.studio/tools/shader-lab/community/effects/signal-rot): A failing scan: dragged streaks, wobble, torn bands, color drift and line noise.
- [Slice](https://eng.basement.studio/tools/shader-lab/community/effects/slice): Shifts horizontal slices of the image sideways into glitchy bands.
- [Threshold](https://eng.basement.studio/tools/shader-lab/community/effects/threshold): Turns the image into stark black and white at a cutoff you set.
- [Voxel](https://eng.basement.studio/tools/shader-lab/community/effects/voxel): Rebuilds the image from isometric cubes, with brighter areas rising higher.

## Packages

- [@basementstudio/shader-lab](https://www.npmjs.com/package/@basementstudio/shader-lab): Portable React/WebGPU runtime — render exported Shader Lab scenes in any React app.
- [@basementstudio/shader-lab-mcp](https://www.npmjs.com/package/@basementstudio/shader-lab-mcp): MCP server that lets an AI agent drive a running Shader Lab editor tab — create and tweak layers, write custom TSL shaders, and screenshot the canvas.
- [GitHub](https://github.com/basementstudio/shader-lab): Source for the app and both packages.

## Markdown mirrors

- https://eng.basement.studio/index.md — product overview.
- https://eng.basement.studio/sitemap.md — content index.
- Scene pages have markdown twins: append `.md` to a scene URL (also served via `Accept: text/markdown`).

## Contact

- dev@basement.studio
- Made by basement.studio: https://basement.studio