MeshGradient
A WebGL flowing gradient: four color blobs are domain-warped into slowly streaming ribbons, blended in Oklab, with a satin sheen gliding along the flow and fine film grain.
Customize
Blob 1
#6e6af0Blob 2
#f472b6Blob 3
#fbbf77Blob 4
#38bdf8Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content layered above the background |
colors | [string, string, string, string] | ['#6e6af0', '#f472b6', '#fbbf77', '#38bdf8'] | Colors of the four blobs (hex) |
grain | number | 0.35 | Film grain strength, 0 disables it |
speed | number | 1 | Animation speed multiplier |
interactive | boolean | true | Whether the color swirl follows the pointer |
className | string | — | Extra class name |
Dependencies
WebGL