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.

How does it work?

You define components and props within a <Shader> tag, and we compile that into a WebGPU shader program, and handle 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 crazy math to learn, no GLSL to write, and no render loop to manage. Changes to prop values update instantly without recompiling the shader, keeping things lightweight for the browser.

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. The JavaScript API uses a preset config approach better suited to imperative workflows.

Requirements

Shaders uses WebGPU, which is supported in most modern browsers now. When WebGPU is unavailable, we fallback gracefully to WebGLv2.