Static Mesh Gradient
Installation
npm i @paper-design/shaders-react
Code
import { StaticMeshGradient } from '@paper-design/shaders-react'; <StaticMeshGradient height={500} colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33"]} positions={2} waveX={1} waveXShift={0.6} waveY={1} waveYShift={0.21} mixing={0.93} grainMixer={0} grainOverlay={0} offsetX={0} offsetY={0} scale={1} rotation={270} />
Props
Name | Description | Type | Values |
---|---|---|---|
colors | Up to 10 colors used in the gradient | string[] | Hex, RGB, or HSL color |
positions | Color spots placement | number | 0 to 100 |
waveX | Strength of sine wave distortion along X axis | number | 0 to 1 |
waveXShift | Phase offset applied to the X-axis wave | number | 0 to 1 |
waveY | Strength of sine wave distortion along Y axis | number | 0 to 1 |
waveYShift | Phase offset applied to the Y-axis wave | number | 0 to 1 |
mixing | Blending behavior (sharper vs. smoother color transitions) | number | 0 to 1 |
grainMixer | Strength of grain distortion applied to color edges | number | 0 to 1 |
grainOverlay | Post-processing RGB grain overlay | number | 0 to 1 |
offsetX | Horizontal offset of the graphics center | number | -1 to 1 |
offsetY | Vertical offset of the graphics center | number | -1 to 1 |
width | CSS width style of the shader element | number | string | — |
height | CSS height style of the shader element | number | string | — |
scale | Overall zoom level of the graphics | number | 0.01 to 4 |
rotation | Overall rotation angle of the graphics | number | 0 to 360 |
Description
Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops.