Paper Shaders

Paper Shaders x Metal

Note

This fork: Paper Shaders × Metal. All 29 shaders ported to native Metal, with a Swift runtime and a macOS preview app.

• packages/shaders-metal — TypeScript toolchain that converts the web shaders to .metal + manifest, plus an MCP server for agent-driven param control
• packages/shaders-metal-swift — Swift package (MTKView runtime) and the Paper Shaders Metal macOS app, golden-tested against the web reference

Development happens here; the Swift package and preview app are distributed from l0kyurue1/paper-shaders-metal (SPM install, app releases, install.sh), mirrored via scripts/export-release.sh.

Eight of the 29 shaders, rendered by the same runtime:

Everything below is the upstream README.

---

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

1. Bump the version numbers as desired manually
2. Use bun run build on the top level of the monorepo to build each package
3. 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.

---

Copyright Lost Coast Labs, Inc. (http://paper.design)