Shaders for JavaScript, no framework required.

200+ shader components, TypeScript ready. Compose in your codebase, or design in the editor and export for JavaScript.

Works with Vite, Webpack, Web Components and plain HTML

Ship a shader as easily as you ship a button.

Every effect in Shaders is a plain JavaScript component. Install the package, import createShader, and pass it a canvas and a list of components. Props are type-safe with the included TypeScript declarations, and any prop can be updated at runtime. Works with Vite, Webpack, Web Components and plain HTML.

JavaScript quickstartComposing effects

glass-background.js

import { createShader } from 'shaders/js'

const canvas = document.getElementById('glass-background')

const shader = await createShader(canvas, {
  components: [
    {
      type: 'Swirl',
      props: { colorA: '#ffffff', colorB: '#f5f3ea', detail: 1.5 },
    },
    {
      type: 'ChromaFlow',
      props: {
        baseColor: '#ffffff',
        downColor: '#e0a000',
        leftColor: '#ffe066',
        radius: 4,
        rightColor: '#f5c400',
        upColor: '#fff0a8',
      },
    },
    {
      type: 'FlutedGlass',
      props: {
        aberration: 0,
        angle: 30,
        frequency: 8,
        lightAngle: -90,
        refraction: 4,
        shape: 'rounded',
        softness: 1,
      },
    },
  ],
})

<canvas id="glass-background">

Mix and match components

Stack, nest, mask and blend them to design new unique looks.

Production-ready

Every component is optimized for performance out of the box.

Update at runtime

Change any prop with shader.update(). Drive animations from your own code.

Design in a pro-grade editor. Export to your codebase.

FAQs

No. shaders/js is a plain ES module with an imperative API. It works in any bundler-based project such as Vite or Webpack, inside Web Components, and in plain HTML with an ESM-compatible setup. The same components the React, Vue, Svelte, and Solid packages wrap are all available. Read the JavaScript quickstart
Add a canvas element, size it with CSS, and call createShader with the canvas and a list of components. The animation loop starts on its own, and the shader tracks the canvas size through a ResizeObserver. If you resize the canvas from your own code, call resize on the shader to sync.
No. You work with component names and props in plain objects. The shaders themselves are written and tuned by us, and the renderer compiles them for the GPU when createShader runs.
Yes. shaders/js ships type declarations for createShader, its options, and every component type and its props, so a misspelled prop or a wrong value type is caught in a TypeScript project, and editors autocomplete props in plain JavaScript too.
Give a component an id in the components list, then call update on the shader with that id and the props to change. The new values are written to the GPU as uniforms, with no recompile and no flicker, so a slider, a scroll handler, or your own animation loop can drive any effect.
Yes. The canvas has no intrinsic size. Whatever class or style you put on the canvas element controls its size and position, so w-full and aspect-video work the way you expect, and the shader follows the element as it resizes.
The canvas stays transparent, onReady never fires, and nothing is written to the console. The onUnavailable option fires once so you can show your own fallback, such as a gradient or an image. WebGPU is supported in all major modern browsers. Check your browser
Effects render on the GPU, and update calls write uniforms without recompiling. The renderer is built on TypeGPU rather than a general-purpose 3D engine, so shaders compile roughly 25x faster on the client than Three.js-based alternatives, and canvases scrolled out of view drop to about one frame per second. Performance guide
Call destroy on the shader to free its GPU resources. In a single-page app, do this when the page or route that owns the canvas goes away.
Yes. Shaders MCP connects Cursor, Claude Code, Codex, and other MCP-compatible agents to your account and the preset library. Your agent can search presets, install them into your JavaScript codebase, and wire props to your state. Set up Shaders MCP
Shaders is free to try. Install the package, explore the design editor, and experiment in your own projects. Commercial or production use requires a Core or Pro plan. See pricing

Unlock a library of 0 production-ready presets.

Explore presets