An animated multi-color gradient WebGL flow field background.
Unlock component
One license unlocks every pro feature for life, including the ones we haven't built yet.
Already have an account? Sign in
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#2D1499", "#C2D0F5", "#F7EBEB"] | Palette blended across the flow, interpolated in Oklab. 2 to 8 colors. |
| speed | number | 0.1 | Animation speed of the flow field. |
| scale | number | 0.5 | Scale of the flow pattern. |
| amplitude | number | 0.5 | Strength of the domain warping. |
| frequency | number | 0.5 | Frequency of the warping detail. |
| stripes | number | 4 | Number of banding stripes across the gradient. |
| seed | number | 0 | Random seed that shifts the pattern. |
| dither | boolean | false | Enables ordered (Bayer) dithering. |
| ditherAmount | number | 5 | Dither strength. Only applies when dither is on. |
| ditherSize | number | 4 | Size of each dither cell in pixels. Only applies when dither is on. |
| grain | boolean | true | Enables animated film grain. |
| grainAmount | number | 0.22 | Grain strength. Only applies when grain is on. |
React Three Fiber
React renderer for Three.js.
Motion
React animation library.
WebGL Provider (Atelier)
A single shared WebGL canvas for the whole app.