Documentation

GuidesComponents

What is Shaders?

Shaders is a component library for building GPU-accelerated visual effects directly in the browser. You describe what you want using the same declarative, component-based syntax you already know from building your frontend UI — and Shaders handles all the GPU-side work for you.

<Shader className="w-full h-64">
  {/* Base gradient */}
  <LinearGradient angle={180} colorSpace="oklab" startColor="#1aff00" endColor="#0000ff" />

  {/* Hidden sine wave used as a mask shape */}
  <Dither id="wave-mask" visible={false} pixelSize={5} threshold={0.24}>
    <SineWave amplitude={0.32} angle={309} frequency={1.1} softness={0.79} thickness={0.81} />
  </Dither>

  {/* Second gradient, revealed only through the wave mask */}
  <LinearGradient startColor="#1aff00" endColor="#0000ff" maskSource="wave-mask" />
</Shader>

How does it work?

Under the hood, Shaders uses Three/TSL to compile each component in the component tree into a portion of a single shader program, and handles any blending/masking/etc. to output the final look.

It all renders to a single <canvas> element. You size and position it with CSS, just like any other HTML element. No matter how many nested layers you define, the result is always a single visual element.

<Shader class="absolute inset-0 -z-10">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

There's no canvas API to learn, no GLSL to write, and no render loop to manage. Prop changes update the GPU uniforms (inputs) instantly without recompiling the shader, keeping things lightweight and snappy.

What can you build?

You can build a TON of different effects with Shaders, ranging from hero section backgrounds to interactive and stylized media. Every component comes with configurable props that, when combined, can create a wide range of different interesting visuals. Power features like masking, blending, and dynamic props provide even more ways to build something that's truly unique.

Supported frameworks

Shaders ships a single package with dedicated entry points for each framework. Component-based frameworks (Vue, React, Svelte, Solid) share the same declarative API — you compose <Shader> trees just like any other component. The JavaScript API uses a preset config approach better suited to imperative workflows.

Requirements

Shaders uses WebGPU, which is supported in Chrome 113+, Edge 113+, and Safari 18+ (macOS/iOS). When WebGPU is unavailable we fallback gracefully to WebGLv2, which is supported in all major browsers.

Next
Quickstart
Install Shaders and build your first GPU-accelerated effect with React