Repolode
Submit
paper-design

paper-design/shaders

Zero-dependency WebGL-style canvas shaders for web backgrounds and textures, usable via npm (React or vanilla JS) or designed visually in Paper.

View on GitHubWebsite
Stars
3,919
Forks
174
Open issues
14
Last commit
2 days ago

What is it?

Paper Shaders is a set of canvas-based shader components for adding animated or static textures to websites, such as gradient backgrounds, or masking shapes and text with shader effects. It is distributed as two npm packages: @paper-design/shaders for vanilla JavaScript and @paper-design/shaders-react for React, and the project has no runtime dependencies.

The library ships shaders such as MeshGradient and DotOrbit, which take options like colors, distortion, swirl, speed and scale. Settings can be written directly in code or designed visually in Paper, then exported as lightweight code for any codebase. Animation is optional.

The project is aimed at designers who want common shader looks in their designs and at developers who want performant, customizable backgrounds. Vue and other frameworks are not yet supported, though community contributions are welcome in the future. The maintainers recommend pinning versions because the 0.0.x line may include breaking changes.

Key features

  • 01Zero-dependency canvas shader components
  • 02Available as npm packages for React and vanilla JavaScript
  • 03Visual design in Paper with export to code
  • 04Customizable colors, distortion, swirl, speed and scale
  • 05Optional animation

Use cases

  • Adding animated gradient backgrounds to a marketing website
  • Masking shapes or text with shader textures
  • Prototyping visual styles in Paper and shipping them as code

Quick start

  1. 1

    Install the React package

    npm i @paper-design/shaders-react
  2. 2

    Or install the vanilla JS package

    npm i @paper-design/shaders
  3. 3

    Pin the dependency version, since breaking changes ship under 0.0.x versioning

  4. 4

    Import a shader component such as MeshGradient and use it with colors and style props

Things to know

  • The project is at 0.0.x versioning, so breaking changes may ship between releases and versions should be pinned.
  • Only React and vanilla JS are supported; Vue support is not yet available.

Topics

#webgl#shaders#react#canvas#animation#design

FAQ

What is shaders?
Zero-dependency WebGL-style canvas shaders for web backgrounds and textures, usable via npm (React or vanilla JS) or designed visually in Paper. Paper Shaders is a set of canvas-based shader components for adding animated or static textures to websites, such as gradient backgrounds, or masking shapes and text with shader effects. It is distributed as two npm packages: @paper-design/shaders for vanilla JavaScript and @paper-design/shaders-react for React, and the project has no runtime dependencies.
Is shaders free to use? What license does it have?
shaders is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is shaders still maintained?
Actively maintained. The last commit to shaders was on Nov 5, 2026.
What can I use shaders for?
Adding animated gradient backgrounds to a marketing website Masking shapes or text with shader textures Prototyping visual styles in Paper and shipping them as code
How do I install shaders?
Install the React package: npm i @paper-design/shaders-react Or install the vanilla JS package: npm i @paper-design/shaders Pin the dependency version, since breaking changes ship under 0.0.x versioning Import a shader component such as MeshGradient and use it with colors and style props
Where can I get shaders?
The source code and installation instructions are on GitHub: https://github.com/paper-design/shaders

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects