shader-effects-inc/shaders: WebGPU parts for React, Vue, Svelte, Solid, JS & Framer · GitHub

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

• Real WebGPU, declarative API: 200+ results you drop in as parts. Gradients, noise, glass, steel, mild, distortions, transitions, blurs, cursor results. Nest them, mix them, masks them.
• A design editor that writes your code: design on an infinite canvas at shaders.com, then export the precise part tree on your framework. Free.
• Every framework, one package deal: first-class React, Vue, Svelte, Solid and JavaScript entries, with the identical props in all places.
• Production-ready: TypeScript, extensively optimized, typed props with reactive updates, SSR protected. Used on 1000’s of internet sites by 16,000+ design engineers.

Every impact is a part. renders the canvas; its youngsters are layers, evaluated prime to backside and blended on the GPU.

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

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

Get began with Shaders for React.

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

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

Get began with Shaders for Vue.

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

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

Get began with Shaders for Svelte.

import { Shader, LinearGradient, CursorPath } from 'shaders/strong'

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

Get began with Shaders for Solid.

import { createShader } from 'shaders/js'

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

Get began with Shaders for JavaScript.

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

Most folks do not write their results by hand. They design them.

The design editor at shaders.com is an infinite canvas the place you stack parts, tune each prop with actual controls, drive props from the cursor or a timeline, and see the outcome dwell. When it appears proper, Export Code offers you the part tree in your framework, prepared to stick.

Design and export are free with an account. Your work is saved as tasks you may come again to.

Open the design editor

The CLI connects a codebase to your Shaders account, so the consequences you design land in your mission as actual part recordsdata and keep in sync.

npx shaders join        # hyperlink this codebase to a Shaders mission
npx shaders set up        # decide shaders from that mission; writes part recordsdata
npx shaders replace         # pull in what you modified within the editor

It detects your framework, writes to your parts folder, and data what it put in in a lock file. Nothing to put in globally.

Read the CLI guide.

Give your coding agent the identical instruments you may have:

• MCP server: npx shaders@newest install-mcp configures Claude Code, Cursor, Codex, Windsurf, Copilot and others. Your agent can discover, set up and edit the shaders you design. Works on any account, free included. MCP guide.
• llms.txt: shaders.com/llms.txt indexes each docs web page, and shaders.com/llms-full.txt carries the complete part reference with props, defaults and ranges.

Everything above is free. Pro provides the library and the workflow round it:

• 1,000+ production-ready presets, organised into collections
• 55+ web site sections, full and able to drop in
• HD video and picture rendering with out a watermark
• One-click set up inside Framer with the Framer plugin
• Unlimited model historical past within the editor
• Pro presets by means of the CLI and MCP
• Exclusive Discord position and channel, precedence assist, all future updates

See pricing

If you want a model new part, you may write one. A part is a plain object handed to outlineShader: a reputation, its props, and what to attract at every pixel. Mount it with like another part.

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

export const Halo = outlineShader({
  title: 'Halo',
  props: {
    shade: { default: '#ffd166', remodel: transformColor },
    heart: { default: { x: 0.5, y: 0.5 }, remodel: transformPosition },
    radius: { default: 0.6 },
  },
  paint: wgsl`
    let d = size((uv - heart) * vec2f(side, 1.0)) / radius;
    return vec4f(shade.rgb, 1.0 - smoothstep(0.8, 1.0, d));
  `,
})

The information covers each methods to jot down the pixel half: composing it from the std primitives (experimental) or writing WGSL instantly (steady). Custom Components · Primitives reference

• The engine, each part and the framework bindings on this repository and the shaders npm package deal are MIT licensed.
• The design editor, presets, sections and different platform options at shaders.com are separate from this package deal and have their very own terms.

Issues and pull requests are welcome. View the contributing guide earlier than beginning, and for something greater than a bug repair, open a difficulty to debate it earlier than the PR.

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

pnpm set up
pnpm lib:construct   # construct each package deal (regenerates the registry and framework parts)
pnpm take a look at        # the engine's take a look at suite

Say good day on Discord.

Shaders © Shader Effects, Inc.