paper-design/shaders

Zero-dependency canvas shaders that can be installed from npm or designed in Paper

TypeScriptApache-2.0 Last commit 22 hours ago shaders.paper.design

Open on GitHub

Last 24 hours: +7; stars
Last 7 days: +170; 5× its usual pace
Last 30 days: +299; stars
Total stars: 3,748; 3.4k a month ago
Forks: 162; 16 contributors

Star history

Last 12 weeks · weekly cumulative stars · computed from public GitHub star events

Momentum: #65 in Web frameworks this week · 5× its usual pace

Rank in its topics

Position among repos ranked in each topic (min. 20 stars gained)

Rank of paper-design/shaders in each topic for today, this week and this month
Topic	Today	This week	This month
Web frameworks	–	#65of 194	#139of 352
TypeScript	–	#230of 584	#408of 861

Health signals

Mixed signalsChecked Oct 15, 2026

Commit activity: Commits in 4 of the last 13 weeks 11 commits on the default branch in 90 days
Maintainers: 3 active maintainers Top author: 73% of the last 11 commits
Issue responsiveness: Too few issues to tell 1 issue opened by others in 90 days
Pull requests: 5 merged, 3 closed, 3 open Of 11 pull requests opened in 90 days
Releases: No GitHub releases Not counted: many projects ship without them
Project hygiene: License, CI; no security policy
OpenSSF Scorecard: Not scanned Unknown, not counted against the project

Signals are computed automatically from public GitHub data. They are not an endorsement or a security audit. How health is computed

README

README.md

Paper Shaders

Getting started

// React
npm i @paper-design/shaders-react

// vanilla
npm i @paper-design/shaders

// Please pin your dependency – we will ship breaking changes under 0.0.x versioning

Documentation

React documentation and interactive examples →

React example

import {MeshGradient, DotOrbit} from '@paper-design/shaders-react';

<MeshGradient
    colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
    distortion={1}
    swirl={0.8}
    speed={0.2}
    style={{width: 200, height: 200}}
/>

<DotOrbit
    colors={['#d2822d', '#0c3b7e', '#b31a57', '#37a066']}
    colorBack={'#000000'}
    scale={0.3}
    style={{width: 200, height: 200}}
/>

// these settings can be configured in code or designed in Paper

Goals:

Give designers a visual way to use common shaders in their designs
What you make is directly exportable as lightweight code that works in any codebase

What it is:

Zero-dependency HTML canvas shaders that can be installed from npm or designed in Paper
To be used in websites to add texture as backgrounds or masked with shapes and text
Animated (or not, your choice) and highly customizable

Values:

Very lightweight, maximum performance
Visual quality
Abstractions that are easy to play with
Wide browser and device support

Framework support:

Vanilla JS (@paper-design/shaders)
React JS (@paper-design/shaders-react)
Vue and others: intent to accept community PRs in the future

Release notes

View changelog →

Building and publishing

Bump the version numbers as desired manually
Use bun run build on the top level of the monorepo to build each package
Use bun run publish-all to publish all (or bun run publish-all-test to do a dry run). You can do this even if you just bumped one package version. The others will fail to publish and continue.

License and use

License

Paper Shaders is licensed under Apache 2.0.

You can use Paper Shaders in commercial websites, apps, games, videos, prototypes, internal tools, and other end products without visible attribution.

If you redistribute Paper Shaders code as part of another shader library, plugin, or tool, please preserve the included LICENSE and NOTICE files. Visible credit such as “Powered by Paper Shaders” is also appreciated and helps us continue investing in this library.