Skip to main content

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 StartedExplore Shaders
✨

30+ Animated Shader Effects

Quick Start

Get up and running with Paper Shaders in minutes

1

Install the package

Install Paper Shaders using your preferred package manager:
npm install @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.
2

Import and use a shader

Import any shader component and add it to your React app:
App.jsx
import { MeshGradient } from '@paper-design/shaders-react';

function App() {
  return (
    <MeshGradient
      colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
      distortion={1}
      swirl={0.8}
      speed={0.2}
      style={{ width: '100%', height: 400 }}
    />
  );
}
3

Customize and explore

Adjust shader parameters in code or design visually using Paper. All settings are exportable as lightweight code that works in any codebase.
Check out the Shaders section to explore all 30+ available effects, from mesh gradients to halftone filters.

Why Paper Shaders?

Built for performance, designed for creativity

Zero Dependencies

Lightweight WebGL shaders with no external dependencies. Maximum performance, minimum bundle size.

Framework Support

Works with React, vanilla JavaScript, and more. Vue and other frameworks coming soon via community PRs.

30+ Shader Effects

From mesh gradients to halftone filters, animated patterns to image effects—all highly customizable.

TypeScript Ready

Full TypeScript support with complete type definitions for all shader parameters and props.

Design Tool Integration

Visual design interface in Paper lets designers create shaders without code, then export for developers.

Production Ready

Optimized for real-world use in websites, apps, and products. Wide browser and device support.

Explore Shaders

Discover shader effects by category

🌊

Gradients & Colors

Mesh gradients, radial gradients, and flowing color effects

View shaders
🎨

Noise & Patterns

Perlin noise, simplex noise, Voronoi, and abstract patterns

View shaders
⚡

Animated Effects

Dot orbits, spirals, swirls, and dynamic motion effects

View shaders
🖼️

Image Filters

Water distortion, dithering, halftone, and glass effects

View shaders

Resources

Everything you need to build with Paper Shaders

Installation

Setup instructions for React and vanilla JavaScript

Usage Guides

Learn best practices and advanced techniques

API Reference

Complete API documentation for all components

Ready to add stunning shaders to your project?

Get started with Paper Shaders today and bring beautiful WebGL effects to your websites and applications.

Start Building