Grain Gradient
An animated, grain-textured gradient with seven configurable abstract shapes.
Customize
Softness
0.5
Intensity
0.5
Noise
0.25
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 GrainGradient API. This includes frame, scale,
rotation, offsets, fit controls, pixel-ratio controls, styles, and every
shader-specific prop. See the
Paper Grain 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[] | ["#ff6b35", "#f7c948", "#ff8fab", "#7c3aed"] | Supplies up to seven gradient colors. The wrapper provides a warm curated palette when omitted. |
colorBack | string | "#1e0c0a" | Sets the background color behind the animated bands. |
shape | "wave" | "dots" | "truchet" | "corners" | "ripple" | "blob" | "sphere" | "blob" | Selects the generated abstract form. |
softness | number | 0.7 | Controls the sharpness of transitions between color bands from 0 to 1. |
intensity | number | 0.35 | Controls distortion between color bands from 0 to 1. |
noise | number | 0.45 | Controls the grain overlay from 0 to 1. |
speed | number | 0.18 | Sets the base animation rate. Playback can resolve the effective speed to zero without changing this value. |
scale | number | 1.15 | Sets the default zoom level while remaining fully overridable through the Paper API. |
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.