Skip to main content
Paper Shaders is a collection of 28 high-performance WebGL2 shaders you can drop into any web app. Install from npm, configure with typed props, and ship beautiful animated backgrounds, textures, and image effects with zero runtime dependencies.

React quickstart

Add your first shader to a React app in under two minutes.

Vanilla JS quickstart

Use shaders in any framework — or no framework at all.

Browse shaders

Explore all 28 shaders: gradients, noise, patterns, and image filters.

API reference

Full TypeScript API for ShaderMount, sizing, and all shader parameters.

​
Why Paper Shaders?

Zero dependencies

Pure WebGL2 — no Three.js, no PIXI, no runtime overhead. Each shader is a self-contained fragment shader string.

Animated by default

Control speed, direction, and frame offset. Set speed={0} for a static, zero-cost render.

Fully typed

Every shader exposes TypeScript param and uniform types extracted directly from source.

SSR safe

Undefined uniforms are gracefully skipped, so shaders render without errors during server-side rendering.

Image filters

Apply fluted glass, water distortion, dithering, heatmap, liquid metal, and halftone effects to any image.

Designed in Paper

Configure shaders visually in the Paper design tool and export directly to production-ready code.

​
Get started

1

Install the package

Choose the package for your stack.
npm install @paper-design/shaders-react
Pin your dependency version. Paper Shaders ships breaking changes under 0.0.x versioning while the API stabilises.
2

Add a shader to your page

Import a component and drop it in — it fills its parent container.
import { MeshGradient } from '@paper-design/shaders-react';

export default function Hero() {
  return (
    <div style={{ width: '100%', height: 400 }}>
      <MeshGradient
        colors={['#e0eaff', '#241d9a', '#f75092', '#9f50d3']}
        speed={1}
        style={{ width: '100%', height: '100%' }}
      />
    </div>
  );
}
3

Customise with props

Every shader exposes typed props for colors, speed, distortion, sizing, and more. See the shader reference for all options.

Build docs developers (and LLMs) love

Get started for freeTalk to us