Skip to main content
Paper Shaders provides a collection of GPU-accelerated visual effects that run smoothly in the browser. Each shader is highly customizable and available as both React components and vanilla JavaScript functions.

​
Categories

​
Gradients

Smooth color transitions and blends perfect for backgrounds and visual interest.

​
Noise & Organic

Natural, flowing patterns based on mathematical noise functions.
  • Simplex Noise - Smooth animated curves with multi-color gradients
  • Neuro Noise - Glowing web-like structure of fluid lines
  • Perlin Noise - Classic 3D Perlin noise with customizable octaves
  • Smoke Ring - Radial gradient shaped with layered noise for smoky effects

​
Shapes & Patterns

Geometric and organic shapes with dynamic animations.
  • Metaballs - Gooey balls that merge into smooth organic shapes
  • Voronoi - Animated cellular pattern with customizable edges

​
Installation

All shaders are included in the Paper Shaders packages: 
npm install @paper-design/shaders-react

​
Usage Patterns

​
React Components

All shaders are available as React components: 
import { MeshGradient } from '@paper-design/shaders-react';

function App() {
  return (
    <MeshGradient
      colors={['#e0eaff', '#241d9a', '#f75092', '#9f50d3']}
      speed={1}
      distortion={0.8}
    />
  );
}

​
Vanilla JavaScript

For non-React projects, use the core package: 
import { ShaderMount, meshGradientFragmentShader } from '@paper-design/shaders';

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  meshGradientFragmentShader,
  {
    u_colors: [[0.88, 0.92, 1, 1], [0.14, 0.11, 0.6, 1], [0.97, 0.31, 0.57, 1]],
    u_colorsCount: 3,
    u_distortion: 0.8,
    u_swirl: 0.1,
    // ... other uniforms
  },
  {}, // WebGL context attributes
  1   // speed
);

​
Common Parameters

Most shaders share these common parameters:
  • speed - Animation speed multiplier (default: 1)
  • frame - Manual frame control when speed is 0
  • scale - Zoom level (0.01 to 4)
  • rotation - Rotation angle in degrees (0 to 360)
  • fit - How to fit the shader: ‘none’, ‘contain’, or ‘cover’
  • offsetX/offsetY - Position offset (-1 to 1)
  • originX/originY - Transform origin point (0 to 1)

​
Performance Tips

  • Use speed={0} and control frame manually for paused animations
  • Lower scale values can improve performance
  • Reduce color counts when possible
  • Consider using simpler shaders for mobile devices

​
Browser Support

Paper Shaders requires WebGL 2.0 support, which is available in:
  • Chrome 56+
  • Firefox 51+
  • Safari 15+
  • Edge 79+
For older browsers, implement a fallback using CSS gradients or static images.