Beautiful WebGL Shaders for Modern Web

Zero-dependency canvas shaders that bring stunning visual effects to your websites. Design in Paper or install from npm with full React and vanilla JavaScript support.

Get Started Explore Shaders

✨

30+ Animated Shader Effects

Quick Start

Get up and running with Paper Shaders in minutes

Install Paper Shaders using your preferred package manager: ```bash npm theme={null} npm install @paper-design/shaders-react ``` ```bash yarn theme={null} yarn add @paper-design/shaders-react ``` ```bash pnpm theme={null} pnpm add @paper-design/shaders-react ``` For vanilla JavaScript projects, use `@paper-design/shaders` instead. We recommend pinning your dependency version as breaking changes may occur under 0.0.x versioning. Import any shader component and add it to your React app: ```jsx App.jsx theme={null} import { MeshGradient } from '@paper-design/shaders-react'; function App() { return ( ); } ``` Adjust shader parameters in code or design visually using [Paper](https://paper.design). All settings are exportable as lightweight code that works in any codebase. Check out the [Shaders](/shaders/overview) section to explore all 30+ available effects, from mesh gradients to halftone filters.

Why Paper Shaders?

Built for performance, designed for creativity

Lightweight WebGL shaders with no external dependencies. Maximum performance, minimum bundle size. Works with React, vanilla JavaScript, and more. Vue and other frameworks coming soon via community PRs. From mesh gradients to halftone filters, animated patterns to image effects—all highly customizable. Full TypeScript support with complete type definitions for all shader parameters and props. Visual design interface in Paper lets designers create shaders without code, then export for developers. Optimized for real-world use in websites, apps, and products. Wide browser and device support.