Getting started

Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them. You compose effects the way you compose UI, and they render live in the browser on WebGPU.

You don't need to know WGSL, GLSL, or graphics programming. If you can lay out a page in CSS or stack layers in Figma, you have the model you need.

What you can make

The component library has nearly 200 components:

  • Textures: gradients, noise, and patterns for backgrounds.
  • Shape effects: glass, neon and chrome inside a 2D or 3D shape, including your own SVG.
  • Distortions: warps, ripples, and refraction.
  • Stylize: halftone, ASCII, and dithering for images and video.
  • Interactive: effects that follow the cursor.
  • Adjustments, blurs, and transitions for any layer.

Building an effect

An effect is a <Shader> with components inside it. The children stack like layers in Figma: each one is drawn on top of the ones before it, and an effect such as <GlassTiles> bends everything below it:

<Shader>
  <LinearGradient />
  <Circle color="#ff0088" />
  <GlassTiles />
</Shader>

However many layers you add, a <Shader> renders to one <canvas>. Props bind to your framework's state, and most update on the next frame without recompiling. Composing effects covers nesting, blending and masking.

Choosing how to work

Every route ends in the same components in your codebase.

  • Design editor: build an effect visually with sliders, color pickers and live preview, then export it as code for your framework.
  • Code: install the shaders package and write components directly. Start with the quickstart.
  • AI agent: connect Claude Code, Cursor, or another agent through the Shaders MCP to have it install and edit effects for you.
  • CLI: the Shaders CLI installs shaders into your project and keeps them in sync with the editor.
  • Framer: the Shaders plugin for Framer puts your effects and the Pro shader library on the Framer canvas, with no npm or code.

Writing your own components

Custom components are defined in TypeScript and work like any built-in. Build them from primitives (small pieces such as noise, lights and warps) or write the pixel math in WGSL. Primitives are experimental and may change between releases.

Browser support

Shaders runs on WebGPU, the emerging web standard for GPU graphics. On a device without WebGPU, the canvas stays transparent: whatever sits behind it shows through, and the rest of your page works as normal.

What is Shaders Pro

The engine and every component are open source under the MIT license. The design editor is free to use, including projects and code export, but isn't open source. Shaders Pro adds:

  • Shader library: pro-grade, finished effects you open in the editor or install into your project, then adjust. Collections group shaders that share a style.
  • Sections: complete website sections (heroes, feature rows, pricing, footers) with the shader already wired into the layout.
  • Unlimited version history in the design editor.
  • Library access in the CLI and MCP: both tools are free, and Pro lets you install library shaders and sections through them.

See pricing for plans.

Next steps