Skip to main content
@paper-design/shaders-react exports a ready-to-use React component for every shader in the library. All components are client-only (marked 'use client') and accept standard <div> props alongside their shader-specific params.

​
Component pattern

Every component follows the same structure: 
// Component props = ShaderComponentProps + shader-specific Params
interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}

// The component itself
const MeshGradient: React.FC<MeshGradientProps>;

// A set of named presets
const meshGradientPresets: ShaderPreset<MeshGradientParams>[];
ShaderComponentProps provides width, height, minPixelRatio, maxPixelCount, webGlContextAttributes, ref, and all standard <div> props. See React ShaderMount for the full definition.

​
All components

MeshGradient

Flowing color spots moving along distinct trajectories with organic distortion

SmokeRing

Radial multi-colored gradient shaped with layered noise for a smoky aesthetic

NeuroNoise

Glowing web-like structure of fluid lines and soft intersections

DotOrbit

Animated multi-color dots with each dot orbiting around its cell center

DotGrid

Static grid pattern of circles, diamonds, squares, or triangles

SimplexNoise

Multi-color gradient mapped into smooth, animated curves

Metaballs

Gooey blobs moving around the center and merging into organic shapes

Waves

Static line pattern configurable from sharp zigzags to smooth flowing waves

PerlinNoise

Animated 3D Perlin noise with exposed controls

Voronoi

Anti-aliased animated Voronoi pattern with smooth, customizable edges

Warp

Animated color fields warped by noise and swirls over base patterns

GodRays

Animated rays of light radiating from the center, blended with up to 5 colors

Spiral

Single-color animated spiral morphing across a wide range of shapes

Swirl

Animated bands of color twisting and bending into spirals and arcs

Dithering

Animated 2-color dithering over multiple pattern sources

GrainGradient

Multi-color gradients with grainy, noise-textured distortion

PulsingBorder

Luminous trails of color merging into a glowing gradient frame

ColorPanels

Glowing translucent 3D panels rotating around a central axis

StaticMeshGradient

Multi-point mesh gradients with up to 10 color spots and warp controls

StaticRadialGradient

Radial gradient with up to 10 blended colors and advanced focal point control

PaperTexture

Static texture from multiple noise layers for paper and cardboard surfaces

FlutedGlass

Image filter that transforms an image into streaked, ribbed glass distortions

Water

Water-like surface distortion with natural caustic realism

ImageDithering

Dithering image filter with 4 modes and multiple color palettes

Heatmap

Glowing gradient of colors flowing through an input image

LiquidMetal

Futuristic liquid metal material applied to an uploaded logo or abstract shape

HalftoneDots

Halftone-dot image filter with customizable grids, palettes, and dot styles

HalftoneCmyk

Classic CMYK halftone image filter

​
Presets

Every component ships with a set of named presets — curated parameter combinations that demonstrate the shader’s range. Presets are typed as ShaderPreset<Params> (or ImageShaderPreset<Params> for image-filter shaders that exclude the image param).

​
Exported preset arrays

ExportType
meshGradientPresetsShaderPreset<MeshGradientParams>[]
smokeRingPresetsShaderPreset<SmokeRingParams>[]
neuroNoisePresetsShaderPreset<NeuroNoiseParams>[]
dotOrbitPresetsShaderPreset<DotOrbitParams>[]
dotGridPresetsShaderPreset<DotGridParams>[]
simplexNoisePresetsShaderPreset<SimplexNoiseParams>[]
metaballsPresetsShaderPreset<MetaballsParams>[]
wavesPresetsShaderPreset<WavesParams>[]
perlinNoisePresetsShaderPreset<PerlinNoiseParams>[]
voronoiPresetsShaderPreset<VoronoiParams>[]
warpPresetsShaderPreset<WarpParams>[]
godRaysPresetsShaderPreset<GodRaysParams>[]
spiralPresetsShaderPreset<SpiralParams>[]
swirlPresetsShaderPreset<SwirlParams>[]
ditheringPresetsShaderPreset<DitheringParams>[]
grainGradientPresetsShaderPreset<GrainGradientParams>[]
pulsingBorderPresetsShaderPreset<PulsingBorderParams>[]
colorPanelsPresetsShaderPreset<ColorPanelsParams>[]
staticMeshGradientPresetsShaderPreset<StaticMeshGradientParams>[]
staticRadialGradientPresetsShaderPreset<StaticRadialGradientParams>[]
paperTexturePresetsShaderPreset<PaperTextureParams>[]
flutedGlassPresetsShaderPreset<FlutedGlassParams>[]
waterPresetsShaderPreset<WaterParams>[]
imageDitheringPresetsShaderPreset<ImageDitheringParams>[]
heatmapPresetsShaderPreset<HeatmapParams>[]
liquidMetalPresetsShaderPreset<LiquidMetalParams>[]
halftoneDotsPresetsShaderPreset<HalftoneDotsParams>[]
halftoneCmykPresetsShaderPreset<HalftoneCmykParams>[]

​
Using a preset

import { MeshGradient, meshGradientPresets } from '@paper-design/shaders-react';

const preset = meshGradientPresets[0];
// preset.name  → "Default"
// preset.params → { colors: [...], distortion: 0.8, speed: 1, fit: 'contain', ... }

<MeshGradient
  {...preset.params}
  style={{ width: '100%', height: '400px' }}
/>

​
Meta objects

Some shaders export a <name>Meta object with static metadata about the shader — for example, the maximum number of colors it supports.

​
Exported meta objects

import {
  meshGradientMeta,       // { maxColorCount: 10 }
  dotOrbitMeta,
  godRaysMeta,
  grainGradientMeta,
  metaballsMeta,
  pulsingBorderMeta,
  simplexNoiseMeta,
  smokeRingMeta,
  swirlMeta,
  voronoiMeta,
  warpMeta,
  heatmapMeta,
  colorPanelsMeta,
  staticMeshGradientMeta,
  staticRadialGradientMeta,
} from '@paper-design/shaders-react';
These are re-exported from @paper-design/shaders. Use them to drive UI controls dynamically — for example, to set the maximum number of color stops in a color picker. 
import { meshGradientMeta } from '@paper-design/shaders-react';

console.log(meshGradientMeta.maxColorCount); // 10

​
Full usage example

'use client';

import { useState } from 'react';
import { MeshGradient, meshGradientPresets } from '@paper-design/shaders-react';

export function GradientDemo() {
  const [presetIndex, setPresetIndex] = useState(0);
  const preset = meshGradientPresets[presetIndex];

  return (
    <div>
      <MeshGradient
        {...preset.params}
        style={{ width: '100%', height: '500px', borderRadius: '16px' }}
      />
      <div>
        {meshGradientPresets.map((p, i) => (
          <button key={p.name} onClick={() => setPresetIndex(i)}>
            {p.name}
          </button>
        ))}
      </div>
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us