← Shader Lab

About Shader Lab

A free, browser-based editor for stacking and animating shader effects — by basement.studio.

What it is

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.

Shader Lab is built and operated by basement.studio, the design and engineering studio behind the Geist typeface and websites for companies like Vercel and ElevenLabs.

How it works

A scene is a stack of layers. Source layers put something on the canvas — an image, a video, your camera, text, a mesh gradient, or a 3D model. Effect layers transform everything below them, and they stack: a video under a pixelation pass under a CRT pass renders exactly in that order, in real time.

Every layer parameter can be animated on the timeline, and the whole composition exports to video directly from the browser.

There is also a custom shader layer: write TSL (three.js Shading Language) in a sandbox that compiles in the browser and shows you compile errors immediately.

The effect catalog

Every effect below can be stacked on any source, reordered, masked, blended, and animated on the timeline.

  • ASCII effect example

    ASCII

    Turns the image into text glyphs for a classic terminal look.

  • Blob Tracking effect example

    Blob Tracking

    Tracks moving regions and frames them with CCTV-style shapes, labels, and an inner effect.

  • Bloom

    Adds a standalone highlight bloom pass to the incoming frame.

  • Blur

  • Chromatic Aberration effect example

    Chromatic Aberration

    Offsets color channels for fringing and lens-separation effects.

  • Circuit Bent effect example

    Circuit Bent

    Renders luma-gated scanlines and bends them around a pull or push attractor.

  • CRT effect example

    CRT

    Adds scanlines, phosphor bloom, and display-era noise.

  • Directional Blur effect example

    Directional Blur

    Smears pixels linearly or radially for motion, focus, or depth.

  • Displacement Map effect example

    Displacement Map

    Pushes pixels along luminance to create warped displacement fields.

  • Dithering effect example

    Dithering

    Reduces color resolution into ordered or textured dithering.

  • Edge Detect effect example

    Edge Detect

    Extracts contrast edges and turns them into graphic outlines.

  • Fluted Glass effect example

    Fluted Glass

    Ribbed lenticular glass distortion with subtle chromatic split.

  • Halftone effect example

    Halftone

    Converts the frame into graphic dot screens and print textures.

  • Ink effect example

    Ink

    Adds smeared glow and fluid bleed for neon ink-like edges.

  • Particle Grid effect example

    Particle Grid

    Breaks the image into a glowing particle matrix.

  • Pattern effect example

    Pattern

    Maps the source into repeatable woven and graphic textures.

  • Pixel Sorting effect example

    Pixel Sorting

    Sorts neighboring pixels into streaks based on luma or color.

  • Pixelation effect example

    Pixelation

    Groups neighboring pixels into larger blocks for a low-res look.

  • Plotter effect example

    Plotter

    Pen-plotter aesthetic with hatching, crosshatching, and ink simulation.

  • Posterize effect example

    Posterize

    Compresses tones into fewer steps while keeping the image graphic.

  • Progressive Blur effect example

    Progressive Blur

    Blur that ramps from sharp to soft across a controllable range.

  • Slice effect example

    Slice

    Offsets horizontal slices into blocky glitch bands and streaks.

  • Threshold effect example

    Threshold

    Turns the frame into stark black and white with controllable cutoff and grain.

  • Voxel effect example

    Voxel

    Quantizes the frame into isometric cubes; depth raises columns by luminance.

Use it outside the editor

@basementstudio/shader-lab

Portable React/WebGPU runtime — render exported Shader Lab scenes in any React app.

@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.

Both packages and the whole app are open source on GitHub.

The community gallery

Publishing a scene puts it in the community gallery, where anyone can open it, like it, and remix it into their own scene. Remixes credit the original scene and author through a lineage link.

Frequently asked questions

Is Shader Lab free?

Yes. Shader Lab is free to use in the browser, and the runtime and MCP packages are open source. There is no paid tier.

Do I need an account?

No. You can use the whole editor without signing in — your work autosaves into your browser's own IndexedDB storage and nothing is sent to a server. An account (Google or GitHub) is only needed to save drafts to the cloud or publish scenes to the community gallery.

What browsers does it work in?

Shader Lab runs on WebGPU, so it needs a browser with WebGPU enabled — recent versions of Chrome and Edge on desktop, and current Safari and Firefox releases.

Can I use a scene on my own website?

Yes. The @basementstudio/shader-lab npm package is a portable React/WebGPU runtime that renders exported Shader Lab scenes inside any React app.

Can AI agents drive the editor?

Yes. The @basementstudio/shader-lab-mcp package is an MCP server that lets an agent like Claude Code control a running editor tab — adding and tweaking layers, writing custom TSL shaders with real compile feedback, and taking canvas screenshots. Open the editor with ?agent=1 to connect.

What does remixing mean?

Every published scene in the community gallery can be opened in the editor and remixed into a new scene. Remixes keep a lineage credit that links back to the original scene and its author.