Shaders

Shaders

WebGPU effects as componentsfor React, Vue, Svelte, Solid and JavaScript

npm install shaders

Table of Contents

1. Why Shaders?
2. 🧩 Components
3. 🎨 Design visually, export code
4. ⌨️ CLI
5. 🤖 Using Shaders with AI
6. ⚡️ Shaders Pro
7. 🧪 Build your own component
8. 👩🏻‍⚖️ License
9. 💎 Contribute

Why Shaders?

• Real WebGPU, declarative API: 200+ effects you drop in as components. Gradients, noise, glass, metal, light, distortions, transitions, blurs, cursor effects. Nest them, blend them, mask them.
• A design editor that writes your code: design on an infinite canvas at shaders.com, then export the exact component tree for your framework. Free.
• Every framework, one package: first-class React, Vue, Svelte, Solid and JavaScript entries, with the same props everywhere.
• Production-ready: TypeScript, extensively optimized, typed props with reactive updates, SSR safe. Used on thousands of websites by 16,000+ design engineers.

🧩 Components

Every effect is a component. <Shader> renders the canvas; its children are layers, evaluated top to bottom and blended on the GPU.

React

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

Get started with Shaders for React.

Vue

<script setup>
import { Shader, LinearGradient, CursorTrail } from 'shaders/vue'
</script>

<template>
  <Shader class="w-full h-64">
    <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
    <CursorTrail />
  </Shader>
</template>

Get started with Shaders for Vue.

Svelte

<script>
  import { Shader, LinearGradient, CursorTrail } from 'shaders/svelte'
</script>

<Shader class="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

Get started with Shaders for Svelte.

Solid

import { Shader, LinearGradient, CursorTrail } from 'shaders/solid'

<Shader class="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

Get started with Shaders for Solid.

JavaScript

import { createShader } from 'shaders/js'

await createShader(document.getElementById('my-shader'), {
  components: [
    { type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' } },
    { type: 'CursorTrail' },
  ],
})

Get started with Shaders for JavaScript.

Browse all 200+ components, each with a live preview and every prop documented.

🎨 Design visually, export code

Most people don't write their effects by hand. They design them.

The design editor at shaders.com is an infinite canvas where you stack components, tune every prop with real controls, drive props from the cursor or a timeline, and see the result live. When it looks right, Export Code gives you the component tree in your framework, ready to paste.