# 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), needs 2+ 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 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 (needs strokeWidth > 0) [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 (needs colorStroke alpha > 0) [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 (4 x 10) colors, 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), needs 2+ colors [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 (dots are static at spreading = 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

---

### 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 (needs shadows > 0) [CSS color]
- **colorHighlight** (string): Highlights color (needs highlights > 0) [CSS color]
- **shadows** (number): A color gradient added over both image and background, following the distortion shape (needs colorShadow alpha > 0) [min: 0, max: 1]
- **highlights** (number): Thin strokes 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", "flat"]
- **distortion** (number): The power of distortion applied within each stripe [min: 0, max: 1]
- **shift** (number): Texture shift in direction opposite to the grid (needs distortion > 0) [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 (overridden by marginLeft/marginRight/marginTop/marginBottom) [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 (needs distortion > 0) [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.1, 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.
- **shape** (enum): The predefined shape used as an effect mask (needs no image) ["none", "circle", "daisy", "diamond", "metaballs"]
- **colors** (string[]): Up to 6 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), needs innerGlow > 0 [min: 0, max: 1]
- **outerDistortion** (number): The power of smoke distortion outside the input shape (shape defined by alpha channel), needs outerGlow > 0 [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 (needs innerGlow > 0) [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.1, 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 (needs bloom > 0) [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 (needs midIntensity > 0) [min: 0, max: 1]
- **midIntensity** (number): Brightness/intensity of the central glow (needs midSize > 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

---

### 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 (positions only with sharp type); naturally makes the background more visible [min: 0, max: 1]
- **type** (enum): Dot type style (dots and ink differ most at 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 (needs colorC alpha > 0) [min: 0, max: 1]
- **floodM** (number): Uniform magenta flood applied to all dots (needs colorM alpha > 0) [min: 0, max: 1]
- **floodY** (number): Uniform yellow flood applied to all dots (needs colorY alpha > 0) [min: 0, max: 1]
- **floodK** (number): Uniform black flood applied to all dots (needs colorK alpha > 0) [min: 0, max: 1]
- **gainC** (number): Proportional cyan gain that enhances existing dots (needs colorC alpha > 0) [min: -1, max: 1]
- **gainM** (number): Proportional magenta gain that enhances existing dots (needs colorM alpha > 0) [min: -1, max: 1]
- **gainY** (number): Proportional yellow gain that enhances existing dots (needs colorY alpha > 0) [min: -1, max: 1]
- **gainK** (number): Proportional black gain that enhances existing dots (needs colorK alpha > 0) [min: -1, max: 1]
- **grainSize** (number): Size of grain texture, applied to both grain and overlay (relative to image box), needs grainMixer or grainOverlay > 0 [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.1, 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 (needs originalColors off) [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 (needs contrast > 0) [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 (at 0 the luminance is flat, so all the dots get equal size and the image content is lost; with originalColors on the dots still take their color from the 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 (needs grainMixer or grainOverlay > 0) [min: 0, max: 1]
- **scale** (number): Overall zoom level of the graphics [min: 0.1, 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 shifts 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), needs innerGlow or outerGlow > 0 [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 size 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.1, 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 (needs originalColors off) [CSS color]
- **colorFront** (string): Foreground color (needs originalColors off) [CSS color]
- **colorHighlight** (string): The secondary foreground color (set it same as colorFront to get a classic 2-color dithering), needs originalColors off [CSS color]
- **originalColors** (boolean): Use the original colors of the image [true, false]
- **inverted** (boolean): Inverts the image luminance, doesn’t affect the color scheme [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.1, 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 (needs spread > 0, count > 2) [min: -1, max: 1]
- **angle** (number): Angle of the color spread in degrees (needs spread > 0, 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 (needs 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 (needs 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 (needs 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 (needs spread > 0, dispersion > 0) [min: -1, max: 1]
- **dispersionColor** (number): Rotates the colors around the hue wheel, 0 to 1 for a full turn (needs spread > 0, 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 (needs 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 (needs 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 (needs spread > 0) [min: -1, max: 1]
- **noise** (number): Noise distortion over the spread direction within the spread distance (needs spread > 0) [min: 0, max: 1]
- **noiseFrequency** (number): Noise frequency (scale), higher value gives more detailed distortion (needs spread > 0, noise > 0) [min: 0, max: 1]
- **noiseOffset** (number): Shifts the noise pattern diagonally, can be used as a seed to get a different scatter (needs spread > 0, 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 (needs 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.1, 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.
- **shape** (enum): The predefined shape used as an effect mask (none = the effect fills the canvas), needs no image ["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.1, 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, applied to the balls in order (colors beyond count are unused) [CSS color]
- **colorBack** (string): Background color [CSS color]
- **count** (number): Number of balls (fractional values shrink the last ball) [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 transition between colorMid and colorBack [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 (needs fiber > 0) [min: 0.01, max: 1]
- **crumples** (number): Cell-based crumple pattern [min: 0, max: 1]
- **crumpleSize** (number): Cell-based crumple pattern scale (needs crumples > 0) [min: 0.01, max: 1]
- **folds** (number): Depth of the folds (needs contrast > 0 to shade the surface) [min: 0, max: 1]
- **foldCount** (number): Number of folds (15 max), needs folds > 0 [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, dots and fade [min: 0, max: 1000]
- **scale** (number): Overall zoom level of the graphics [min: 0.1, 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 two 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 (needs octaveCount > 1) [min: 0.3, max: 1]
- **lacunarity** (number): Frequency step, typically around 2. Defines how compressed the pattern is (needs octaveCount > 1) [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 (amplified by softness) [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: 4, 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 (needs smoke > 0) [min: 0, max: 1]
- **margin** (number): Distance from canvas edges to the effect (overridden by marginLeft/marginRight/marginTop/marginBottom) [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), needs 2+ colors [min: 1, max: 10, step: 1]
- **softness** (number): Color transition sharpness (0 = hard edge, 1 = smooth gradient), needs 2+ 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

---

### 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 (needs radius > 0) [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 (needs strokeWidth ≠ 0.5) [min: 0, max: 1]
- **noise** (number): Noise distortion applied over the canvas (needs noiseFrequency > 0) [min: 0, max: 1]
- **noiseFrequency** (number): Noise frequency (needs 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 (needs waveX > 0) [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 (needs waveY > 0) [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 = equal color distribution) [min: -1, max: 1]
- **focalAngle** (number): Angle of the focal point in degrees (needs 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 (needs distortion > 0) [min: -1, max: 1]
- **distortionFreq** (number): Radial distortion frequency (needs 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 (needs twist > 0) [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 (needs noiseFrequency > 0) [min: 0, max: 1]
- **noiseFrequency** (number): Noise frequency (needs 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 5) [CSS color]
- **colorGlow** (string): Color tint for the radial inner shadow effect inside cells (needs 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), needs 2+ colors [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 (needs colorGlow alpha > 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

---

### 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 two 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 (needs swirlIterations > 1) [min: 0, max: 1]
- **swirlIterations** (number): Number of layered swirl passes (integer), needs swirl > 0 [min: 2, max: 20, step: 1]
- **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 (needs highlights > 0) [CSS color]
- **highlights** (number): A coloring added over the image/background, following the caustic shape (needs colorHighlight alpha > 0) [min: 0, max: 1]
- **layering** (number): The power of 2nd layer of caustic distortion (needs caustic or highlights > 0) [min: 0, max: 1]
- **edges** (number): Caustic distortion power on the image edges (needs image and caustic > 0) [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 (needs image) [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.1, 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 (at frequency = 0 it only shifts the lines) [min: 0, max: 1]
- **frequency** (number): Wave frequency (needs amplitude > 0) [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 and 3. Intermediate values morph gradually between these shapes (needs amplitude > 0, frequency > 0) [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'
```