Static Mesh Gradient
A configurable multi-point mesh gradient for polished static backgrounds.
Customize
Positions
2
Wave X
1
Wave X Shift
0.6
Wave Y
1
Wave Y Shift
0.21
Mixing
0.93
Grain Mixer
0
Grain Overlay
0
Scale
1
Rotation
270
Offset X
0
Offset Y
0
API reference
The wrapper adds playback and runtime safeguards while preserving the
complete Paper StaticMeshGradient API. This includes speed, frame, mesh
controls, sizing controls, pixel-ratio controls, styles, and every upstream
prop. See the
Paper Static Mesh Gradient reference
for the full prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy when a non-zero Paper speed is used. Auto pauses for reduced motion and while the shader is outside the viewport. |
colors | string[] | ["#ffad0a", "#6200ff", "#e2a3ff", "#ff99fd"] | Supplies up to ten mesh colors. The wrapper provides a warm curated palette when omitted. |
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, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.