Mesh Gradient
A flowing multi-color mesh gradient for polished product backgrounds.
Customize
Distortion
0.8
Swirl
0.1
Grain Mixer
0
Grain Overlay
0
Speed
1
Scale
1
Rotation
0
Offset X
0
Offset Y
0
API reference
The wrapper adds playback and accessible runtime defaults while preserving
the complete Paper MeshGradient API. This includes frame, scale,
rotation, offsets, fit controls, pixel-ratio controls, styles, and every
shader-specific prop. See the
Paper Mesh Gradient reference
for the full upstream prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport; paused fixes the effective speed at zero. |
colors | string[] | ["#dff8ff", "#58d5c9", "#2f8cff", "#c4f1e6"] | Supplies up to ten mesh color spots. The wrapper provides a clear blue-green curated palette when omitted. |
distortion | number | 0.75 | Controls organic noise distortion from 0 to 1. |
swirl | number | 0.35 | Controls vortex distortion from 0 to 1. |
grainMixer | number | 0.08 | Adds grain distortion to the boundaries between mesh colors from 0 to 1. |
grainOverlay | number | 0.04 | Adds a monochrome post-processing grain overlay from 0 to 1. |
speed | number | 0.12 | Sets the base animation rate. Playback can resolve the effective speed to zero without changing this value. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, defaults, playback policy, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.