Paper Shaders
30 zero-dependency canvas shaders as React components or vanilla JS, Apache-2.0
Paper Shaders is Paper's open-source shader library: about 30 named GPU effects that run on an HTML canvas with no runtime dependencies, published as @paper-design/shaders (vanilla) and @paper-design/shaders-react. The catalog splits into image filters (Paper texture, Fluted glass, Water, Image dithering, Halftone dots, Halftone CMYK, Lens distortion), logo animations (Heatmap, Liquid metal, Gem smoke), and standalone effects (Mesh gradient, Static mesh gradient, Static radial gradient, Dithering, Grain gradient, Dot orbit, Dot grid, Warp, Spiral, Swirl, Waves, Neuro noise, Perlin, Simplex noise, Voronoi, Pulsing border, Metaballs, Color panels, Smoke ring, God rays). Each shader is a component with typed props for colors, speed, distortion and scale, and the site is a live playground where you tune props and copy the result.
npm i @paper-design/shaders-reactThis is the default answer for an animated hero background in a React app — reach for MeshGradient or GrainGradient before you write a canvas or pull in three.js, since the whole package is dependency-free and the props are plain colors and numbers you can drive from a theme. Tune values on shaders.paper.design and copy the prop object; do not hand-write GLSL against it. Two cautions: these paint every frame on the GPU so put at most one per viewport, gate it behind prefers-reduced-motion yourself (the components do not do it for you), and give the canvas a static CSS fallback color for first paint and for SSR.
Why it is here. It collapses the whole 'animated gradient hero' problem into an npm install with no WebGL boilerplate, under a permissive license that allows commercial use without attribution — which is why it has become the reference shader kit for modern React landing pages.
- ~30 named shaders
- zero runtime dependencies
- React and vanilla builds
- live prop playground
- Apache-2.0, commercial use allowed
Verified 2026-08-15. HTTP 200. https://shaders.paper.design/, https://github.com/paper-design/shaders, https://registry.npmjs.org/@paper-design/shaders-react
