// React
npm i @paper-design/shaders-react
// vanilla
npm i @paper-design/shaders
import { MeshGradient } from '@paper-design/shaders-react';
<MeshGradient
color1="#FFC0CB" // pink
color2="#FFFF00" // yellow
color3="#0000FF" // blue
color4="#800080" // purple
speed={0.25}
style={{ width: 500, height: 200 }} />
// these settings can be configured in code or designed in Paper
- 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
- 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
- Very lightweight, maximum performance
- Visual quality
- Abstractions that are easy to play with
- Wide browser and device support
- Vanilla JS (@paper-design/shaders)
- React JS (@paper-design/shaders-react)
- Vue and others: accepting community PRs
import { MeshGradient } from '@paper-design/shaders-react';
<MeshGradient
color1="#FFC0CB" // pink
color2="#FFFF00" // yellow
color3="#0000FF" // blue
color4="#800080" // purple
speed={0.25}
style={{ width: 500, height: 200 }} />
// these settings can be configured in code or designed in Paper
import { ShaderMount, meshGradientFragmentShader } from '@paper-design/shaders';
const myCanvas = document.createElement('canvas');
const shaderParams = {
u_color1: 'pink',
u_color2: 'white',
u_color3: 'blue',
u_color4: 'purple',
u_speed: 0.25,
}
const meshGradient = new ShaderMount(myCanvas, meshGradientFragmentShader, shaderParams);
- Perlin noise
- Voronoi
- Meta balls
- Wave
- Random lines
- Value
- Marble
- Mesh gradient
- Dots
- Grid
- God rays
- Starfield
- Stripe
- Mountains
- Clouds
- Water
- 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 (orbun 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.