Backgrounds
Mesh gradient
A domain-warped, slowly flowing iridescent gradient with glints that bends around the pointer.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { MeshGradient } from '@vizzele/react/gl';
<MeshGradient speed={0.25} warp={1} colors={['#00e5ff', '#ff2bd6', '#ffb238', '#a8ff3e']} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 0.25 | Flow speed. |
warp | number | 1 | Swirl amount. |
interactive | number | 1 | Pointer influence. |
intensity | number | 0.85 | Brightness. |
grain | number | 0.06 | Built-in film grain. |
colors | string[] | iridescent palette | Four hex colors. |
Accessibility
- The canvas is aria-hidden and never takes pointer events — content on top stays fully interactive.
- Pauses when off-screen or in a background tab. Renders one still frame with reduced motion.
- Weak devices get a lower resolution automatically; without WebGL2 a static gradient is shown.