Paper Shaders is a library of ultra-fast, zero-dependency GPU shaders for your designs. No three.js, no GLSL to write, no canvas boilerplate. Just install the package and drop in a component.
npm i @paper-design/shaders-reactThis post is written as a practical reference, the kind of doc you'd hand to an AI coding agent (or your future self) to actually build with this library. Every shader below has its import path, the props that matter, and when to reach for it.
Why This Library, Not Raw WebGL
Building this by hand means writing GLSL, setting up a canvas + render loop, handling resize and DPR scaling, and reimplementing noise functions from Shadertoy. Paper Shaders skips all of that:
import { MeshGradient } from "@paper-design/shaders-react";
<MeshGradient
colors={["#000000", "#5B21B6", "#F97316", "#111111"]}
speed={0.3}
distortion={0.8}
swirl={0.5}
className="absolute inset-0 h-full w-full"
/>No canvas ref, no requestAnimationFrame, no cleanup on unmount. The component owns the WebGL context lifecycle. Every prop maps straight to a shader uniform, so tweaking speed or distortion is a GPU-side update, not a re-render.
The Full Catalog
Paper Shaders splits into three groups: image filters (they take an input image/texture), logo animations (built for a mark or icon sitting on top), and effects (freestanding backgrounds/decoration). Import name matches the component name below unless noted.
Image Filters
These wrap an existing image or video and distort/stylize it.
| Shader | Component | Use it for |
|---|---|---|
| Paper Texture | PaperTexture | Grainy print/scan look over an image |
| Fluted Glass | FlutedGlass | Frosted-glass / reeded-glass distortion over a photo |
| Water | Water | Ripple/refraction distortion, hero images, product shots |
| Image Dithering | ImageDithering | Retro 1-bit / limited-palette dither over a photo |
| Halftone (Dots) | Halftone | Newsprint dot-pattern over an image |
| Halftone CMYK | HalftoneCMYK | Print-style CMYK offset halftone |
import { Water } from "@paper-design/shaders-react";
<Water
image="/hero.jpg"
speed={0.4}
className="h-[400px] w-full rounded-2xl"
/>Logo Animations
Built to sit behind or around a logotype/icon and stay legible.
| Shader | Component | Use it for |
|---|---|---|
| Heatmap | Heatmap | Pulsing thermal-style glow behind a mark |
| Liquid Metal | LiquidMetal | Chrome/mercury reflection over a logo shape |
| Gem Smoke | GemSmoke | Faceted, prismatic smoke behind a brand mark |
import { LiquidMetal } from "@paper-design/shaders-react";
<LiquidMetal
colorBack="#000000"
colorTint="#c0c0c0"
speed={0.6}
className="h-40 w-40"
/>Effects (Backgrounds, Decoration, Loaders)
The largest group, freestanding shaders for hero sections, page backgrounds, borders, and loading states.
| Shader | Component | Use it for |
|---|---|---|
| Mesh Gradient | MeshGradient | Animated multi-color blend, the classic soft background |
| Static Mesh Gradient | StaticMeshGradient | Same look, no animation, cheaper render, OG images |
| Static Radial Gradient | StaticRadialGradient | Single-point radial blend, spotlight/vignette effect |
| Grain Gradient | GrainGradient | Mesh gradient with heavy film grain baked in |
| Dithering | Dithering | Standalone 1-bit/ordered dither pattern, no source image needed |
| Dot Orbit | DotOrbit | Particles orbiting in a field, ambient motion |
| Dot Grid | DotGrid | Animated grid of dots, subtle texture or interactive backdrop |
| Warp | Warp | Domain-warped flowing color field |
| Spiral | Spiral | Rotating spiral pattern |
| Swirl | Swirl | Swirling color distortion, softer than Spiral |
| Waves | Waves | Layered sine-wave bands |
| Neuro Noise | NeuroNoise | Organic, brain-like noise field |
| Perlin | PerlinNoise | Classic Perlin noise texture |
| Simplex Noise | SimplexNoise | Simplex noise texture, less directional artifacting than Perlin |
| Voronoi | Voronoi | Cellular/organic tiling pattern |
| Pulsing Border | PulsingBorder | Animated glowing border outline, great on cards/buttons |
| Metaballs | Metaballs | Blobby, merging liquid shapes |
| Color Panels | ColorPanels | Sliding/shifting flat color blocks |
| Smoke Ring | SmokeRing | Expanding ring of smoke/energy |
import { Voronoi, PulsingBorder } from "@paper-design/shaders-react";
<Voronoi
colors={["#111111", "#7c3aed", "#f97316"]}
distance={0.4}
className="absolute inset-0 h-full w-full"
/>
<PulsingBorder
colorBack="transparent"
colors={["#f97316", "#7c3aed"]}
className="pointer-events-none absolute inset-0 rounded-xl"
/>Picking the Right One (Quick Decision Guide)
- Need a soft animated hero background?
MeshGradientorGrainGradientif you want visible texture. - Need it for an OG/share image or anywhere animation is wasted?
StaticMeshGradientorStaticRadialGradient, same look, far cheaper. - Need something behind a logo?
LiquidMetal,Heatmap, orGemSmoke, tuned to keep foreground marks legible. - Need a retro/print aesthetic?
Dithering,Halftone, orHalftoneCMYK. - Need ambient motion without color, just texture?
DotGrid,DotOrbit,Perlin, orSimplexNoise. - Need liquid/organic blob shapes?
MetaballsorWarp. - Need a highlight/focus ring on a button or card?
PulsingBorder.
Notes for Agentic Use
If you're an agent (or a human moving fast) wiring this into a codebase:
- Install once:
npm i @paper-design/shaders-react. There's also a framework-agnostic@paper-design/shaderscore package if the target isn't React. - Import only what you use. Each shader is its own component/chunk, so tree-shaking keeps bundle size down even if you reference many of them across a codebase.
- Colors and numeric props are uniforms. Changing them doesn't trigger a DOM re-render, it's a cheap GPU uniform update. Safe to drive from state, scroll position, or a color picker in real time.
- Respect
prefers-reduced-motion. These shaders don't auto-pause on that media query, gate thespeedprop (or skip mounting the component) yourself if accessibility matters for the project. - Client components only. Every shader here needs
"use client"in Next.js App Router since it mounts a WebGL canvas. - For a background layer, wrap in
absolute inset-0 -z-10 h-full w-fulland put content in a sibling with a higher z-index and a scrim/gradient overlay if text needs contrast (see shaders.paper.design for exact prop defaults per shader, they vary a bit component to component).
Where I Used It
On my own landing page intro, I swapped a static gradient div for a MeshGradient running behind the logo reveal, same GSAP timeline, just a living backdrop instead of a flat one. Total add: one import, one component, four color stops. No shader code touched.
For the full live playground with every parameter exposed and copy-paste code for React, Vue, and vanilla JS, go to shaders.paper.design.