shaders README

The project's README from github.com/shader-effects-inc/shaders. As one markdown file: README.md.

Shaders

WebGPU effects as components
for React, Vue, Svelte, Solid and JavaScript

npm version npm downloads per month jsDelivr hits (npm) NPM License

Shaders

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?

🧩 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.

Design and export are free with an account. Your work is saved as projects you can come back to.

Open the design editor

⌨️ CLI

The CLI connects a codebase to your Shaders account, so the effects you design land in your project as real component files and stay in sync.

npx shaders connect        # link this codebase to a Shaders project
npx shaders install        # pick shaders from that project; writes component files
npx shaders update         # pull in what you changed in the editor

It detects your framework, writes to your components folder, and records what it installed in a lock file. Nothing to install globally.

Read the CLI guide.

🤖 Using Shaders with AI

Give your coding agent the same tools you have:

⚡️ Shaders Pro

Everything above is free. Pro adds the library and the workflow around it:

See pricing

🧪 Build your own component

If you need a brand new component, you can write one. A component is a plain object passed to defineShader: a name, its props, and what to draw at each pixel. Mount it with <CustomShader> like any other component.

import { defineShader, wgsl, transformColor, transformPosition } from 'shaders/std'

export const Halo = defineShader({
  name: 'Halo',
  props: {
    color: { default: '#ffd166', transform: transformColor },
    center: { default: { x: 0.5, y: 0.5 }, transform: transformPosition },
    radius: { default: 0.6 },
  },
  paint: wgsl`
    let d = length((uv - center) * vec2f(aspect, 1.0)) / radius;
    return vec4f(color.rgb, 1.0 - smoothstep(0.8, 1.0, d));
  `,
})

The guide covers both ways to write the pixel part: composing it from the std primitives (experimental) or writing WGSL directly (stable). Custom Components · Primitives reference

👩🏻‍⚖️ License

💎 Contribute

Issues and pull requests are welcome. View the contributing guide before starting, and for anything more than a bug fix, open an issue to discuss it before the PR.

The engine lives in packages/core, with one folder per component under src/shaders/. The framework packages are generated from it.

pnpm install
pnpm lib:build   # build every package (regenerates the registry and framework components)
pnpm test        # the engine's test suite

Say hello on Discord.

Shaders © Shader Effects, Inc.

shaders (shader-effects-inc/shaders)

Searching Database…

5K ·GitHub
Shaders
What is this?Shaders is a library of 200+ WebGPU visual effects (gradients, noise, glass, metal, light, distortions, transitions, blurs, cursor effects) shipped as ready-to-use components for React, Vue, Svelte, Solid and plain JavaScript.
Is this one framework, or does each framework get its own package?It is a cross-framework component library: React, Vue, Svelte, Solid and plain JS each get a first-class entry point exposing the same props.
How do I add Shaders to my project?Install the package for your framework and drop in the effect components, or use the Shaders CLI, which connects to your Shaders account, detects your framework, and writes the designed components into your components folder with a lock file to keep them in sync.
Do I need a WebGPU-capable browser?Yes, the effects render through a real WebGPU declarative API, so the target browser needs WebGPU support; the components are TypeScript, SSR safe, and used across thousands of production sites.
Is the whole thing free, or is some of it paid?The core engine, all 200+ components, the design editor, the CLI and the MCP server are free. Shaders Pro adds 1,000+ presets, 55+ ready website sections, watermark-free HD export, a Framer plugin, and unlimited version history.
Is the whole project MIT licensed?Only the engine, components and framework bindings in this repo and npm package are MIT. The design editor, presets, website sections and other shaders.com platform features are separate and have their own terms.
What does the visual design editor do?At shaders.com you design effects on an infinite canvas, tune every prop with live controls, drive props from the cursor or a timeline, then click Export Code to get the matching component tree for your framework, free with an account.
Can AI coding agents use Shaders?Yes, running npx shaders@latest install-mcp sets up an MCP server for Claude Code, Cursor, Codex, Windsurf, Copilot and others, and shaders.com/llms.txt and llms-full.txt give agents the full docs and component reference.
Can I build a custom shader component?Yes, via defineShader you create a plain object with a name, props, and per-pixel drawing logic, written in WGSL directly (stable) or composed from std primitives (experimental), then mounted like any other component.
Who is this aimed at, and how popular is it?It targets front-end and design engineers who want GPU effects without writing WGSL by hand; the project reports being used on thousands of websites by over 16,000 design engineers.
What are similar projects?mitosis, canvas-ui, blobatar, Libraries.dev, plasma-ui, chakra-ui, table, konva
Which topics is it in?solid, vue-components, solidjs, declarative, design-tools, shaders, react-components, svelte, ssr, graphics, component-library, model-context-protocol
Creator
shader-effects-inc
Size
7.7 MB
Stars
5K
Updated
CommitOct 09Releasev4.0.4Oct 09
Age
18d
Commits · 90 Days