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
Что это?Shaders — библиотека из 200+ визуальных эффектов на WebGPU (градиенты, шум, стекло, металл, свет, искажения, переходы, размытия, эффекты курсора), поставляемая в виде готовых компонентов для React, Vue, Svelte, Solid и чистого JavaScript.
Это один фреймворк или у каждого фреймворка свой пакет?Это кросс-фреймворковая библиотека компонентов: для React, Vue, Svelte, Solid и чистого JS есть полноценные точки входа с одинаковыми props.
Как добавить Shaders в свой проект?Установите пакет для своего фреймворка и добавьте компоненты эффектов, либо используйте Shaders CLI — он подключается к вашему аккаунту Shaders, определяет ваш фреймворк и записывает спроектированные компоненты в вашу папку компонентов вместе с lock-файлом, чтобы они оставались синхронизированными.
Нужен ли браузер с поддержкой WebGPU?Да, эффекты рендерятся через настоящий декларативный API WebGPU, поэтому целевому браузеру нужна поддержка WebGPU; компоненты написаны на TypeScript, безопасны для SSR и используются на тысячах продакшн-сайтов.
Всё это бесплатно или что-то платное?Ядро, все 200+ компонентов, редактор дизайна, CLI и MCP-сервер бесплатны. Shaders Pro добавляет 1000+ пресетов, 55+ готовых секций сайтов, HD-экспорт без водяных знаков, плагин для Framer и безлимитную историю версий.
Весь проект под лицензией MIT?Под MIT — только движок, компоненты и привязки к фреймворкам в этом репозитории и npm-пакете. Редактор дизайна, пресеты, секции сайтов и прочие функции платформы shaders.com существуют отдельно и на своих условиях.
Что делает визуальный редактор дизайна?На shaders.com вы проектируете эффекты на бесконечном холсте, настраиваете каждый prop живыми контролами, управляете props от курсора или таймлайна, затем жмёте Export Code и получаете соответствующее дерево компонентов для своего фреймворка — бесплатно при наличии аккаунта.
Могут ли AI-агенты для кодинга использовать Shaders?Да, запуск npx shaders@latest install-mcp разворачивает MCP-сервер для Claude Code, Cursor, Codex, Windsurf, Copilot и других, а shaders.com/llms.txt и llms-full.txt дают агентам полную документацию и справочник компонентов.
Можно ли собрать собственный компонент-шейдер?Да, через defineShader вы создаёте простой объект с именем, props и попиксельной логикой отрисовки — написанной напрямую на WGSL (стабильно) или собранной из примитивов std (экспериментально), — а затем монтируете его как любой другой компонент.
Для кого это и насколько это популярно?Это для фронтенд- и дизайн-инженеров, которым нужны GPU-эффекты без ручного написания WGSL; по данным проекта, его используют на тысячах сайтов более 16 000 дизайн-инженеров.
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
19d
Commits · 90 Days