# Paper Shaders - Complete Documentation

Ultra-fast zero-dependency shader library for React and GLSL

Website: https://shaders.paper.design

## Complete Shader Reference

### Color Panels

**Description:** Glowing translucent 3D panels rotating around a central axis.

**URL:** https://shaders.paper.design/color-panels

**Parameters:**
- **colors** (string[]): Up to 7 colors used to color the panels [CSS color]
- **colorBack** (string): Background color [CSS color]
- **density** (number): Angle between every 2 panels [min: 0.25, max: 7]
- **angle1** (number): Skew angle applied to all panes [min: -1, max: 1]
- **angle2** (number): Skew angle applied to all panes [min: -1, max: 1]
- **length** (number): Panel length (relative to total height) [min: 0, max: 3]
- **edges** (boolean): Color highlight on the panels edges [true, false]
- **blur** (number): Side blur (0 for sharp edges) [min: 0, max: 0.5]
- **fadeIn** (number): Transparency near central axis [min: 0, max: 1]
- **fadeOut** (number): Transparency near viewer [min: 0, max: 1]
- **gradient** (number): Color mixing within a panel (0 = solid panel color, 1 = gradient of two colors) [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Dithering

**Description:** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere). Great for retro, print-like, or stylized UI textures.

**URL:** https://shaders.paper.design/dithering

**Parameters:**
- **colorBack** (string): Background color [CSS color]
- **colorFront** (string): The foreground (ink) color [CSS color]
- **shape** (enum): Shape pattern type ["simplex", "warp", "dots", "wave", "ripple", "swirl", "sphere"]
- **type** (enum): Dithering type ["random", "2x2", "4x4", "8x8"]
- **size** (number): Pixel size of dithering grid [min: 1, max: 20]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Dot Grid

**Description:** Static grid pattern made of circles, diamonds, squares or triangles.

**URL:** https://shaders.paper.design/dot-grid

**Parameters:**
- **colorBack** (string): Background color [CSS color]
- **colorFill** (string): Shape fill color [CSS color]
- **colorStroke** (string): Shape stroke color [CSS color]
- **shape** (enum): The shape type ["circle", "diamond", "square", "triangle"]
- **size** (number): Base size of each shape, pixels [min: 1, max: 100]
- **gapX** (number): Pattern horizontal spacing, pixels [min: 2, max: 500]
- **gapY** (number): Pattern vertical spacing, pixels [min: 2, max: 500]
- **strokeWidth** (number): The outline stroke width, pixels [min: 0, max: 50]
- **sizeRange** (number): Random variation in shape size (0 = uniform size, higher = random value up to base size) [min: 0, max: 1]
- **opacityRange** (number): Random variation in shape opacity (0 = all shapes opaque, higher = semi-transparent dots) [min: 0, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Dot Orbit

**Description:** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures.

**URL:** https://shaders.paper.design/dot-orbit

**Parameters:**
- **colors** (string[]): Up to 10 base colors [CSS color]
- **colorBack** (string): Background color [CSS color]
- **stepsPerColor** (number): Number of extra colors between base colors (1 = N color palette, 2 = 2×N color palette, 3 = 3×N color palette, etc) [min: 1, max: 4, step: 1]
- **size** (number): Dot radius relative to cell size [min: 0, max: 1]
- **sizeRange** (number): Random variation in shape size (0 = uniform size, higher = random value up to base size) [min: 0, max: 1]
- **spreading** (number): Maximum orbit distance [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Fluted Glass

**Description:** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity.

**URL:** https://shaders.paper.design/fluted-glass

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **colorBack** (string): Background color [CSS color]
- **colorShadow** (string): Shadows color [CSS color]
- **colorHighlight** (string): Highlights color [CSS color]
- **shadows** (number): A color gradient added over both image and background, following the distortion shape [min: 0, max: 1]
- **highlights** (number): Thin stokes along distortion shape; useful for antialiasing on the small grid [min: 0, max: 1]
- **size** (number): The size of the distortion shape grid [min: 0, max: 1, step: 0.001]
- **shape** (enum): The shape of the grid ["pattern", "wave", "lines", "linesIrregular", "zigzag"]
- **angle** (number): Direction of the grid relative to the image [min: 0, max: 180]
- **distortionShape** (enum): The shape of the distortion ["prism", "lens", "contour", "cascade", "facete"]
- **distortion** (number): The power of distortion applied within each stripe [min: 0, max: 1]
- **shift** (number): Texture shift in direction opposite to the grid [min: -1, max: 1]
- **stretch** (number): Extra distortion along the grid lines [min: 0, max: 1]
- **blur** (number): One-directional blur over the image and extra blur around the edges [min: 0, max: 1]
- **edges** (number): Glass distortion and softness on the image edges [min: 0, max: 1]
- **margin** (number): Distance from image edges to the effect [min: 0, max: 1]
- **marginLeft** (number): Distance from the left edge to the effect [min: 0, max: 1]
- **marginRight** (number): Distance from the right edge to the effect [min: 0, max: 1]
- **marginTop** (number): Distance from the top edge to the effect [min: 0, max: 1]
- **grainMixer** (number): Strength of grain distortion applied to the shapes’ edges [min: 0, max: 1]
- **grainOverlay** (number): Post-processing b/w grain overlay [min: 0, max: 1]
- **marginBottom** (number): Distance from the bottom edge to the effect [min: 0, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Gem Smoke

**Description:** Fluid, smoke shape animating behind the input image and being distorted by shape

**URL:** https://shaders.paper.design/gem-smoke

**Parameters:**
- **image** (HTMLImageElement | string): An optional image used as an effect mask. A transparent background is required. If no image is provided, the shader defaults to one of the predefined shapes.
- **shape** (enum): The predefined shape used as an effect mask when no image is provided. ["none", "circle", "daisy", "diamond", "metaballs"]
- **colors** (string[]): Up to 5 ray colors [CSS color]
- **colorBack** (string): Background color [CSS color]
- **innerDistortion** (number): The power of smoke distortion inside the input shape (shape defined by alpha channel) [min: 0, max: 1]
- **outerDistortion** (number): The power of smoke distortion outside the input shape (shape defined by alpha channel) [min: 0, max: 1]
- **outerGlow** (number): The visibility of smoke shape out of the input shape (shape defined by alpha channel) [min: 0, max: 1]
- **innerGlow** (number): The visibility of smoke shape inside the input shape (shape defined by alpha channel) [min: 0, max: 1]
- **colorInner** (string): Additional color inside the input shape, mixing with smoke [CSS color]
- **offset** (number): Vertical offset of smoke inside the shape [min: -1, max: 1]
- **angle** (number): Smoke direction [min: 0, max: 360]
- **size** (number): The size of smoke shape relative to the image box [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### God Rays

**Description:** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts.

**URL:** https://shaders.paper.design/god-rays

**Parameters:**
- **colors** (string[]): Up to 5 ray colors [CSS color]
- **colorBack** (string): Background color [CSS color]
- **colorBloom** (string): Color overlay blended with the rays [CSS color]
- **bloom** (number): Strength of the bloom/overlay effect [min: 0, max: 1]
- **intensity** (number): Visibility/strength of the rays [min: 0, max: 1]
- **density** (number): The number of rays [min: 0, max: 1]
- **spotty** (number): The length of the rays [min: 0, max: 1]
- **midSize** (number): Size of the circular glow shape in the center [min: 0, max: 1]
- **midIntensity** (number): Brightness/intensity of the central glow [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Grain Gradient

**Description:** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms.

**URL:** https://shaders.paper.design/grain-gradient

**Parameters:**
- **colors** (string[]): Up to 7 colors used in the gradient [CSS color]
- **colorBack** (string): Background color [CSS color]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **intensity** (number): Distortion between color bands [min: 0, max: 1]
- **noise** (number): Grainy noise overlay [min: 0, max: 1]
- **shape** (enum): Shape type ["wave", "dots", "truchet", "corners", "ripple", "blob", "sphere"]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Halftone CMYK

**Description:** CMYK halftone printing effect with customizable dot patterns and ink colors for each channel

**URL:** https://shaders.paper.design/halftone-cmyk

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **colorBack** (string): Background (paper) color [CSS color]
- **colorC** (string): Cyan ink color (alpha controls layer transparency, not dot size) [CSS color]
- **colorM** (string): Magenta ink color (alpha controls layer transparency, not dot size) [CSS color]
- **colorY** (string): Yellow ink color (alpha controls layer transparency, not dot size) [CSS color]
- **colorK** (string): Black ink color (alpha controls layer transparency, not dot size) [CSS color]
- **size** (number): Grid size (relative to image box) [min: 0, max: 1]
- **gridNoise** (number): Displaces both dot positions and color sampling points; naturally makes the background more visible [min: 0, max: 1]
- **type** (enum): Dot type style (the difference between dots and ink is visible only with low softness) ["dots", "ink", "sharp"]
- **softness** (number): Dots edge softness [min: 0, max: 1]
- **contrast** (number): Input image contrast [min: 0, max: 2]
- **floodC** (number): Uniform cyan flood applied to all dots [min: 0, max: 1]
- **floodM** (number): Uniform magenta flood applied to all dots [min: 0, max: 1]
- **floodY** (number): Uniform yellow flood applied to all dots [min: 0, max: 1]
- **floodK** (number): Uniform black flood applied to all dots [min: 0, max: 1]
- **gainC** (number): Proportional cyan gain that enhances existing dots [min: -1, max: 1]
- **gainM** (number): Proportional magenta gain that enhances existing dots [min: -1, max: 1]
- **gainY** (number): Proportional yellow gain that enhances existing dots [min: -1, max: 1]
- **gainK** (number): Proportional black gain that enhances existing dots [min: -1, max: 1]
- **grainSize** (number): Size of grain overlay texture (relative to image box) [min: 0, max: 1]
- **grainMixer** (number): Strength of grain disturbing dots shape [min: 0, max: 1]
- **grainOverlay** (number): Post-processing b/w grain overlay [min: 0, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Halftone Dots

**Description:** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles

**URL:** https://shaders.paper.design/halftone-dots

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **colorBack** (string): Background color [CSS color]
- **colorFront** (string): Foreground color [CSS color]
- **originalColors** (boolean): Use the sampled image’s original colors instead of colorFront [true, false]
- **type** (enum): Dot style ["classic", "gooey", "holes", "soft"]
- **inverted** (boolean): Inverts the image luminance, doesn’t affect the color scheme; not effective at zero contrast [true, false]
- **grid** (enum): Dots grid type ["square", "hex"]
- **size** (number): Grid size relative to the image box [min: 0, max: 1]
- **radius** (number): Maximum dot size (relative to the grid cell) [min: 0, max: 2]
- **contrast** (number): Contrast applied to the sampled image [min: 0, max: 1]
- **grainMixer** (number): Strength of grain distortion applied to shape edges [min: 0, max: 1]
- **grainOverlay** (number): Post-processing b/w grain overlay [min: 0, max: 1]
- **grainSize** (number): The scale applied to both grain distortion and grain overlay [min: 0, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Heatmap

**Description:** A glowing gradient of colors flowing through an input shape. The effect creates a smoothly animated wave of intensity across the image. With default colors, it shift from cool blues to hot reds, like thermal energy radiating through the shape.

**URL:** https://shaders.paper.design/heatmap

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **colors** (string[]): Up to 10 colors used to color the heatmap [CSS color]
- **colorBack** (string): Background color [CSS color]
- **contour** (number): The heat intensity near the edges of the input shape [min: 0, max: 1]
- **angle** (number): The direction of the heatwaves (angle relative to the shape) [min: 0, max: 360]
- **noise** (number): Grain applied across the entire graphic [min: 0, max: 1]
- **innerGlow** (number): The size of the heated area inside the input shape [min: 0, max: 1]
- **outerGlow** (number): The side of the heated area outside the input shape [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Image Dithering

**Description:** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or colors sampled from the original image).

**URL:** https://shaders.paper.design/image-dithering

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **colorBack** (string): Background color [CSS color]
- **colorFront** (string): Foreground color [CSS color]
- **colorHighlight** (string): The secondary foreground color (set it same as colorFront to get a classic 2-color dithering) [CSS color]
- **originalColors** (boolean): Use the original colors of the image [true, false]
- **type** (enum): Dithering type ["random", "2x2", "4x4", "8x8"]
- **size** (number): Pixel size of dithering grid; linked to the screen space, not to the image box [min: 0.5, max: 20]
- **colorSteps** (number): Number of colors to use (applies to both color modes) [min: 1, max: 7, step: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Lens Distortion

**Description:** Lens Distortion image filter separates an image into shifting color layers (recreating the chromatic aberration of a lens) and warps the image geometry itself, curving it outward or inward like barrel and pincushion distortion.

**URL:** https://shaders.paper.design/lens-distortion

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **spread** (number): Strength of the color split - how far the color layers are pushed apart. This is the master dial for the chromatic aberration; at 0 there is no split and all the other color controls do nothing [min: 0, max: 1]
- **bias** (number): Bias of the color spread: warps how the colors distribute along it. 0 spaces them evenly; toward +/-1 they bunch toward one end of the fan and spread out at the other (no effect with spread = 0) [min: -1, max: 1]
- **angle** (number): Angle of the color spread in degrees (no effect with spread = 0 or perspective = 1) [min: 0, max: 360]
- **perspective** (number): Perspective of the spread: shapes its direction from a straight line to a radial burst. At 0 all layers spread along the straight line set by angle; at 1 they radiate outward from the centre (no effect with spread = 0) [min: 0, max: 1]
- **count** (number): Number of colored layers making the spread - more layers blend into a blur, fewer stay as separate ghosted copies (no effect with spread = 0) [min: 2, max: 50, step: 1]
- **dispersion** (number): Overall amount of color dispersion: at 1 each layer takes its own color from the spectrum, giving the chromatic aberration look; at 0 every layer keeps the original image color, so the spread reads as a plain blur (no effect with spread = 0) [min: 0, max: 1]
- **dispersionShift** (number): Balances the dispersion between a soft circular zone at the centre of the image and the rest of it: 0 applies it evenly over the whole image, -1 keeps it in the centre only, 1 keeps it at the edges only (no effect with spread = 0 or dispersion = 0) [min: -1, max: 1]
- **dispersionColor** (number): Rotates the colors around the hue wheel, 0 to 1 for a full turn (no effect with spread = 0 or dispersion = 0) [min: 0, max: 1]
- **focusCenter** (number): Reduces the spread distance in a circular zone at the centre of the image. 0 keeps the full layers spread in the middle, higher values move the layers closer building an illusion of focus (no effect with spread = 0) [min: 0, max: 1]
- **focusEdges** (number): Reduces the spread distance along the image edges. 0 keeps the full layers spread at the edges, 1 restores the original image at the edges regardless of the chosen spread distance (no effect with spread = 0) [min: 0, max: 1]
- **swirl** (number): Bends the spread around the centre of the image, so the layers trail along circles like a vortex. Each layer is rotated around the centre by an angle growing along the spread, and the effect fades out beyond the inscribed circle (no effect with spread = 0) [min: -1, max: 1]
- **noise** (number): Noise distortion over the spread direction within the spread distance (no effect with spread = 0) [min: 0, max: 1]
- **noiseFrequency** (number): Noise frequency (scale), higher value gives more detailed distortion (no effect with spread = 0 or noise = 0) [min: 0, max: 1]
- **noiseOffset** (number): Shifts the noise pattern diagonally, can be used as a seed to get a different scatter (no effect with spread = 0 or noise = 0) [min: 0, max: 1]
- **lensBulge** (number): Lens warp of the image geometry, applied before the color spread. 0 is flat, positive bulges out like a fisheye, negative pinches in like a pincushion. Strong positive values fade out the corners of the image [min: -1, max: 1]
- **lensCircle** (number): Squeezes pixels outside the circle inward. 0 is off, 1 gives the image exact circular shape with any lensBulge value. Near the rim it also turns the spread radial and damps it, keeping the circular edge clean [min: 0, max: 1]
- **grainMixer** (number): Scatters the spread with grain noise, breaking up the edges of the colored layers (no effect with spread = 0) [min: 0, max: 1]
- **grainOverlay** (number): Post-processing b/w grain overlay [min: 0, max: 1]
- **imageX** (number): Pans the image horizontally behind the effect, without moving the effect itself. 0 is centred [min: -1, max: 1]
- **imageY** (number): Pans the image vertically behind the effect, without moving the effect itself. 0 is centred [min: -1, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Liquid Metal

**Description:** Futuristic liquid metal material applied to uploaded logo or abstract shape.

**URL:** https://shaders.paper.design/liquid-metal

**Parameters:**
- **colorBack** (string): Background color [CSS color]
- **colorTint** (string): Overlay color (color burn blending used) [CSS color]
- **image** (HTMLImageElement | string): An optional image used as an effect mask. A transparent background is required. If no image is provided, the shader defaults to one of the predefined shapes.
- **shape** (enum): The predefined shape used as an effect mask when no image is provided. ["none", "circle", "daisy", "diamond", "metaballs"]
- **repetition** (number): Density of pattern stripes [min: 1, max: 10]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **shiftRed** (number): R-channel dispersion [min: -1, max: 1]
- **shiftBlue** (number): B-channel dispersion [min: -1, max: 1]
- **distortion** (number): Noise distortion over the stripes pattern [min: 0, max: 1]
- **contour** (number): Strength of the distortion on the shape edges [min: 0, max: 1]
- **angle** (number): The direction of pattern animation (angle relative to the shape) [min: 0, max: 360]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Mesh Gradient

**Description:** A flowing composition of color spots, moving along distinct trajectories and transformed by organic distortion.

**URL:** https://shaders.paper.design/mesh-gradient

**Parameters:**
- **colors** (string[]): Up to 10 color spots [CSS color]
- **distortion** (number): The power of organic noise distortion [min: 0, max: 1]
- **swirl** (number): The power of vortex distortion [min: 0, max: 1]
- **grainMixer** (number): Strength of grain distortion applied to the shapes’ edges [min: 0, max: 1]
- **grainOverlay** (number): Post-processing b/w grain overlay [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Metaballs

**Description:** Up to 20 colored gooey balls moving around the center and merging into smooth organic shapes.

**URL:** https://shaders.paper.design/metaballs

**Parameters:**
- **colors** (string[]): Up to 8 base colors [CSS color]
- **colorBack** (string): Background color [CSS color]
- **count** (number): Number of balls [min: 1, max: 20]
- **size** (number): The size of the balls [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Neuro Noise

**Description:** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals.

**URL:** https://shaders.paper.design/neuro-noise

**Parameters:**
- **colorFront** (string): Graphics highlight color [CSS color]
- **colorMid** (string): Graphics main color [CSS color]
- **colorBack** (string): Background color [CSS color]
- **brightness** (number): Luminosity of the crossing points [min: 0, max: 1]
- **contrast** (number): Sharpness of the bright–dark transition [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Paper Texture

**Description:** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces. Can be used as a image filter or as a texture.

**URL:** https://shaders.paper.design/paper-texture

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **colorBack** (string): Background color [CSS color]
- **colorFront** (string): Foreground color [CSS color]
- **contrast** (number): Blending behavior (sharper vs. smoother color transitions) [min: 0, max: 1]
- **roughness** (number): Pixel noise, related to canvas (not scalable) [min: 0, max: 1]
- **fiber** (number): Curly-shaped noise [min: 0, max: 1]
- **fiberSize** (number): Curly-shaped noise scale [min: 0, max: 1]
- **crumples** (number): Cell-based crumple pattern [min: 0, max: 1]
- **crumpleSize** (number): Cell-based crumple pattern scale [min: 0, max: 1]
- **folds** (number): Depth of the folds [min: 0, max: 1]
- **foldCount** (number): Number of folds (15 max) [min: 1, max: 15, step: 1]
- **fade** (number): Big-scale noise mask applied to the pattern [min: 0, max: 1]
- **drops** (number): The visibility of speckle pattern [min: 0, max: 1]
- **seed** (number): Seed applied to folds, crumples and dots [min: 0, max: 1000]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Perlin Noise

**Description:** Classic animated 3D Perlin noise with exposed controls.

**URL:** https://shaders.paper.design/perlin-noise

**Parameters:**
- **colorBack** (string): Background color [CSS color]
- **colorFront** (string): Foreground color [CSS color]
- **proportion** (number): Blend point between 2 colors (0.5 = equal distribution) [min: 0, max: 1]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **octaveCount** (number): Perlin noise octaves number (more octaves for more detailed patterns) [min: 1, max: 8, step: 1]
- **persistence** (number): Roughness, falloff between octaves [min: 0.3, max: 1]
- **lacunarity** (number): Frequency step, typically around 2. Defines how compressed the pattern is [min: 1.5, max: 10]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Pulsing Border

**Description:** Luminous trails of color merging into a glowing gradient contour.

**URL:** https://shaders.paper.design/pulsing-border

**Parameters:**
- **colors** (string[]): Up to 5 colors [CSS color]
- **colorBack** (string): Background color [CSS color]
- **roundness** (number): The border radius [min: 0, max: 1]
- **thickness** (number): The border base width [min: 0, max: 1]
- **softness** (number): Border edge sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **aspectRatio** (enum): Aspect ratio of the effect ["auto", "square"]
- **intensity** (number): Thickness of individual color spots [min: 0, max: 1]
- **bloom** (number): The power of glow (0 = normal color blending, 1 = fully additive blending) [min: 0, max: 1]
- **spots** (number): Number of spots added for each color [min: 1, max: 20, step: 1]
- **spotSize** (number): Angular size of spots [min: 0, max: 1]
- **pulse** (number): Optional pulsing animation [min: 0, max: 1]
- **smoke** (number): Optional noisy shape extending the border shape [min: 0, max: 1]
- **smokeSize** (number): The size of the smoke effect (effective with smoke > 0) [min: 0, max: 1]
- **margin** (number): Distance from canvas edges to the effect [min: 0, max: 1]
- **marginLeft** (number): Distance from the left edge to the effect [min: 0, max: 1]
- **marginRight** (number): Distance from the right edge to the effect [min: 0, max: 1]
- **marginTop** (number): Distance from the top edge to the effect [min: 0, max: 1]
- **marginBottom** (number): Distance from the bottom edge to the effect [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Simplex Noise

**Description:** A multi-color gradient mapped into smooth, animated curves built as a combination of 2 Simplex noises.

**URL:** https://shaders.paper.design/simplex-noise

**Parameters:**
- **colors** (string[]): Up to 10 base colors [CSS color]
- **stepsPerColor** (number): Number of extra colors between base colors (1 = N color palette, 2 = 2×N color palette, 3 = 3×N color palette, etc) [min: 1, max: 10, step: 1]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Smoke Ring

**Description:** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic.

**URL:** https://shaders.paper.design/smoke-ring

**Parameters:**
- **colors** (string[]): Up to 10 colors used for the gradient [CSS color]
- **colorBack** (string): Background color [CSS color]
- **thickness** (number): The thickness of the ring shape [min: 0.01, max: 1]
- **radius** (number): The radius of the ring shape [min: 0, max: 1]
- **innerShape** (number): The ring inner fill [min: 0, max: 4]
- **noiseIterations** (number): A number of noise layers, more layers gives more details [min: 1, max: 8, step: 1]
- **noiseScale** (number): The noise frequency [min: 0.01, max: 5]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Spiral

**Description:** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings.

**URL:** https://shaders.paper.design/spiral

**Parameters:**
- **colorBack** (string): Background color [CSS color]
- **colorFront** (string): Foreground (ink) color [CSS color]
- **density** (number): Spacing falloff simulating perspective (0 = flat spiral) [min: 0, max: 1]
- **distortion** (number): Power of shape distortion applied along the spiral [min: 0, max: 1]
- **strokeWidth** (number): Thickness of spiral curve [min: 0, max: 1]
- **strokeTaper** (number): how much the stroke is loosing width away from center (0 = full visibility) [min: 0, max: 1]
- **strokeCap** (number): Extra stroke width at the center (no effect with strokeWidth = 0.5) [min: 0, max: 1]
- **noise** (number): Noise distortion applied over the canvas (no effect with noiseFrequency = 0) [min: 0, max: 1]
- **noiseFrequency** (number): Moise frequency (no effect with noise = 0) [min: 0, max: 1]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Static Mesh Gradient

**Description:** Multi-point mesh gradient with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops.

**URL:** https://shaders.paper.design/static-mesh-gradient

**Parameters:**
- **colors** (string[]): Up to 10 colors used in the gradient [CSS color]
- **positions** (number): Color spots placement [min: 0, max: 100]
- **waveX** (number): Strength of sine wave distortion along X axis [min: 0, max: 1]
- **waveXShift** (number): Phase offset applied to the X-axis wave [min: 0, max: 1]
- **waveY** (number): Strength of sine wave distortion along Y axis [min: 0, max: 1]
- **waveYShift** (number): Phase offset applied to the Y-axis wave [min: 0, max: 1]
- **mixing** (number): Blending behavior (sharper vs. smoother color transitions) [min: 0, max: 1]
- **grainMixer** (number): Strength of grain distortion applied to the shapes’ edges [min: 0, max: 1]
- **grainOverlay** (number): Post-processing b/w grain overlay [min: 0, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Static Radial Gradient

**Description:** Radial gradient with up to 10 blended colors, featuring advanced mixing modes, focal point controls, shape distortion, and grain effects

**URL:** https://shaders.paper.design/static-radial-gradient

**Parameters:**
- **colors** (string[]): Up to 10 colors used in the gradient [CSS color]
- **colorBack** (string): Background color [CSS color]
- **radius** (number): The size of the shape [min: 0, max: 3]
- **focalDistance** (number): Distance of the focal point from center [min: 0, max: 3]
- **falloff** (number): Gradient decay (0 for linear gradient) [min: -1, max: 1]
- **focalAngle** (number): Angle of the focal point in degrees (effective with focalDistance > 0) [min: 0, max: 360]
- **mixing** (number): Blending behavior (sharper vs. smoother color transitions) [min: 0, max: 1]
- **distortion** (number): Strength of radial distortion [min: 0, max: 1]
- **distortionShift** (number): Radial distortion offset (effective with distortion > 0) [min: -1, max: 1]
- **distortionFreq** (number): Radial distortion frequency (effective with distortion > 0) [min: 0, max: 20, step: 1]
- **grainMixer** (number): Strength of grain distortion applied to the shapes’ edges [min: 0, max: 1]
- **grainOverlay** (number): Post-processing b/w grain overlay [min: 0, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Swirl

**Description:** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns.

**URL:** https://shaders.paper.design/swirl

**Parameters:**
- **colors** (string[]): Up to 10 colors used for the stripes [CSS color]
- **colorBack** (string): Background color [CSS color]
- **bandCount** (number): Number of color bands (0 for concentric ripples) [min: 0, max: 15, step: 1]
- **twist** (number): Vortex power (0 = straight sectoral shapes) [min: 0, max: 1]
- **center** (number): How far from the center the swirl colors begin to appear [min: 0, max: 1]
- **proportion** (number): Blend point between colors (0.5 = equal distribution) [min: 0, max: 1]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **noise** (number): Strength of noise distortion (no effect with noiseFrequency = 0) [min: 0, max: 1]
- **noiseFrequency** (number): Noise frequency (no effect with noise = 0) [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Voronoi

**Description:** Anti-aliased animated Voronoi pattern with smooth and customizable edges.

**URL:** https://shaders.paper.design/voronoi

**Parameters:**
- **colors** (string[]): Base cell colors (up to 10) [CSS color]
- **colorGlow** (string): Color tint for the radial inner shadow effect inside cells (effective with glow > 0) [CSS color]
- **colorGap** (string): Color used for cell borders/gaps [CSS color]
- **stepsPerColor** (number): Number of extra colors between base colors (1 = N color palette, 2 = 2×N color palette, 3 = 3×N color palette, etc) [min: 1, max: 3, step: 1]
- **distortion** (number): Strength of noise-driven displacement of cell centers [min: 0, max: 0.5]
- **gap** (number): Width of the border/gap between cells [min: 0, max: 0.1]
- **glow** (number): Strength of the radial inner shadow inside cells [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Warp

**Description:** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects.

**URL:** https://shaders.paper.design/warp

**Parameters:**
- **colors** (string[]): Up to 10 colors in the gradient [CSS color]
- **proportion** (number): Blend point between 2 colors (0.5 = equal distribution) [min: 0, max: 1]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **distortion** (number): Strength of noise-based distortion [min: 0, max: 1]
- **swirl** (number): Strength of the swirl distortion [min: 0, max: 1]
- **swirlIterations** (number): Number of layered swirl passes (effective with swirl > 0) [min: 0, max: 20]
- **shape** (enum): Base pattern type ["checks", "stripes", "edge"]
- **shapeScale** (number): Zoom level of the base pattern [min: 0, max: 1]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Water

**Description:** Water-like surface distortion with natural caustic realism. Works as an image filter or standalone animated texture.

**URL:** https://shaders.paper.design/water

**Parameters:**
- **image** (HTMLImageElement | string): The image to use for the effect
- **colorBack** (string): Background color [CSS color]
- **colorHighlight** (string): Highlight color [CSS color]
- **highlights** (number): A coloring added over the image/background, following the caustic shape [min: 0, max: 1]
- **layering** (number): The power of 2nd layer of caustic distortion [min: 0, max: 1]
- **edges** (number): Caustic distortion power on the image edges [min: 0, max: 1]
- **waves** (number): Additional distortion based in simplex noise, independent from caustic [min: 0, max: 1]
- **caustic** (number): Power of caustic distortion [min: 0, max: 1]
- **size** (number): Pattern scale relative to the image [min: 0.01, max: 7]
- **speed** (number): Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds
- **frame** (number): Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

### Waves

**Description:** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.

**URL:** https://shaders.paper.design/waves

**Parameters:**
- **colorBack** (string): Background color [CSS color]
- **colorFront** (string): Foreground color [CSS color]
- **amplitude** (number): Wave amplitude [min: 0, max: 1]
- **frequency** (number): Wave frequency [min: 0, max: 2]
- **spacing** (number): The space between every two wavy lines [min: 0, max: 2]
- **proportion** (number): Blend point between front and back colors (0.5 = equal distribution) [min: 0, max: 1]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient) [min: 0, max: 1]
- **shape** (number): Line shape control: zigzag at 0, sine at 1, irregular waves at 2. Intermediate values morph gradually between these shapes [min: 0, max: 3]
- **scale** (number): Overall zoom level of the graphics [min: 0.01, max: 4]
- **rotation** (number): Overall rotation angle of the graphics [min: 0, max: 360]
- **offsetX** (number): Horizontal offset of the graphics center [min: -1, max: 1]
- **offsetY** (number): Vertical offset of the graphics center [min: -1, max: 1]
- **width** (number | string): CSS width style of the shader element
- **height** (number | string): CSS height style of the shader element
- **fit** (enum): How to fit the rendered shader into the canvas dimensions ["contain", "cover"]
- **worldWidth** (number): Virtual width of the graphic before it's scaled to fit the canvas
- **worldHeight** (number): Virtual height of the graphic before it's scaled to fit the canvas
- **originX** (number): Reference point for positioning world width in the canvas [min: 0, max: 1]
- **originY** (number): Reference point for positioning world height in the canvas [min: 0, max: 1]
- **minPixelRatio** (number): Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)
- **maxPixelCount** (number): Maximum pixel count that the shader may process

---

## Usage Examples

Each shader can be used in React applications with the @paper-design/shaders-react package:

```tsx
import { ShaderName } from '@paper-design/shaders-react'

<ShaderName
  height={500}
  // shader-specific props here
/>
```

For GLSL usage, import from @paper-design/shaders:

```ts
import { shaderName } from '@paper-design/shaders'
```