# Shaders

<img alt="image" src="https://shaders.com/og.jpg" />

<p align="center">
  <a href="https://www.npmjs.com/package/shaders" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/shaders?color=0368FF&label=version" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/shaders" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/shaders?color=8D30FF&label=npm" alt="npm downloads per month"></a>
  <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/shaders"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/shaders?logo=jsdeliver&color=FF4FBA"></a>
  <a href="https://twitter.com/intent/user?screen_name=npm_i_shaders" target="_blank"><img alt="X (formerly Twitter) Follow" src="https://img.shields.io/twitter/follow/npm_i_shaders"></a>
</p>

## The design platform for web shaders

Shaders is the design platform for creating production-ready WebGPU effects, used by over 10,000 design engineers. Design visually on an infinite canvas at [shaders.com](https://shaders.com), then ship your work as declarative components for Vue / Nuxt, React / Next, Svelte, Solid, or vanilla JS — all from this single package.

### What's in v3

- **A redesigned visual editor** — design entire projects side by side on an infinite canvas, with familiar transform controls and instant feedback, then export clean framework components ready for production.
- **A new proprietary rendering engine, built on TypeGPU** — fine-tuned for modern WebGPU, with production bundles averaging 3× smaller and in-browser shader compilation up to 25× faster.
- **A huge component library** — gradients, distortions, materials, lighting, post-processing, and raymarched **3D shape effects** (spheres, boxes, procedural forms, even extruded SVGs), plus **text layers**. Compose them by nesting components, with blend modes, masking, and opacity at every level.

**Try it at [shaders.com](https://shaders.com), or watch [video tutorials](https://shaders.com/resources)** — and join the community on [Discord](https://discord.gg/Mfqmb2jCQT).

---

Shaders © Shader Effects, Inc.

Licensed under the [Shader Effects License Agreement](https://shaders.com/license).

- **Free** for personal, non-commercial, and evaluation use — experiment with the design editor and the npm package.
- **Commercial use requires an active Pro or Team license.** This includes client work, SaaS products, internal tools, and any public-facing deployment. Pro also unlocks code export, Pro presets, and priority support.

Redistributing or repackaging Shaders, its presets, or exported code as standalone libraries or downloadable packages is not permitted — nor is building competing tools or services on the technology, embedding it in SaaS or developer tools without an OEM agreement, removing attribution, circumventing license validation, or reverse engineering. See the [full license](https://shaders.com/license) (Sections 3–4) for complete terms.