What is shaders?

Shaders is a design platform for creating production-ready WebGPU effects. It lets developers and design engineers build interactive backgrounds, logo effects, image effects, and other GPU-powered visuals without writing a line of shader code.

Design first. Code second.

Most people start in the design editor, not in code.

In the editor you can:

• Visually build effects by adding and arranging layers
• Combine layers to create something more complex than any single effect
• Adjust properties with sliders, color pickers, and other visual controls
• Experiment quickly, trying ideas without touching a text editor
• Preview instantly, with every change reflected in real time

Once you're happy with the result, you export clean components for your framework of choice, or use the MCP to have your AI coding agent install the effect directly into your project. For most people, the editor is where the actual work of building an effect happens.

Production-ready from day one

What you export is code you can drop straight into your project, not a video or an image. It's written in the same simple, declarative component structure you use throughout Shaders, so it reads clearly and stays easy to adjust once it's in your codebase.

Export to:

• Vue
• React
• Svelte
• Solid
• JavaScript
• Framer

How Shaders works

Under the hood, a <Shader> component renders to a single canvas element, no matter how many layers you nest inside it. Those layers are combined by our own render engine, built on TypeGPU for performance, which compiles everything down to WebGPU.

Props stay reactive, so changing a value updates the effect instantly without recompiling anything.

What can I build?

Almost anything visual. A few examples to get you thinking:

• Hero backgrounds and animated gradients
• Cursor-reactive interactions
• Logo effects and image effects
• Glass, distortion, and lighting effects
• Procedural shapes
• Masking, blending, and text effects
• Animated UI decoration

These building blocks show up everywhere from landing pages and product showcases to portfolio sites and full marketing websites. Every effect is built by combining a handful of simple components, and new components keep expanding what's possible.

No shader experience required

You don't need to know GLSL, WGSL, or any graphics programming to use Shaders. If you're comfortable with everyday frontend development or visual design tools, you already have what you need to get started.

The component-based approach also scales with you. As you get more comfortable, composing and layering effects lets you build results that look more sophisticated than the individual pieces suggest.

Supported frameworks

Shaders ships dedicated integrations for Vue, React, Svelte, Solid, JavaScript, and Framer, so you can use it with the framework or platform you're already building in.

Building in Framer? You don't need npm or any of the code guides here — everything works through the official Shaders plugin for Framer. Browse your shaders and the preset library, then drop effects straight onto your Framer canvas, no code required.

Browser support

Shaders runs on WebGPU, the modern successor to WebGL, now shipping in every major browser. Across telemetry from 145,000+ sessions on 1,000+ production domains, more than 99% of user devices run it without issue. And on the rare device that doesn't support it, the canvas simply stays empty — your layout and the rest of your page carry on exactly as normal.