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 animated backgrounds, textures, and image effects with zero runtime dependencies.

​
Two packages, one API

Paper Shaders is split into two npm packages so you only pull in what your stack needs.
PackageUse case
@paper-design/shadersVanilla JS, any framework, or as a base for custom integrations
@paper-design/shaders-reactReact 18 and 19, with ready-made components and preset exports
Both packages share the same versioning and are always published together.

​
Key features

Zero dependencies

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

Animated by default

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

Fully typed

Every shader exposes TypeScript Params and Uniforms interfaces extracted directly from source.

SSR safe

Undefined uniforms are gracefully skipped during server-side rendering — no window or document errors at build time.

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.

​
Versioning

Paper Shaders is in active development. Breaking changes ship under 0.0.x versioning while the API stabilises.
Pin your dependency to an exact version in package.json. Do not use ^ or ~ ranges until the library reaches 1.0.0.
"@paper-design/shaders-react": "0.0.72"

​
Get started

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.

​
License

Paper Shaders is released under the PolyForm Shield license. You may use it freely in commercial and non-commercial apps, products, and libraries, as long as your product does not compete with Paper or Paper Shaders. You may not use this code in a design tool or shader library that competes with Paper or Paper Shaders. Copyright Lost Coast Labs, Inc. (paper.design)

Build docs developers (and LLMs) love

Get started for freeTalk to us