Mesh Gradient
Animated radial mesh background with drifting color points, a stable base glow, optional pointer interaction, and a children slot for hero layouts.
Default
Live-tune speed, blur, height, interaction, palette preset, and optional hero content
Sign in to view this example's source code.
Sign inControls
speed
blur
intensity
interactive
minHeight
palette
showContent
Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | 5-stop default palette | Up to five CSS colors for mesh points and base glow |
| speed | number | 1 | Drift animation speed multiplier |
| blur | number | 70 | Blur strength in pixels on the mesh layer |
| intensity | number | 10 | Reserved for future pointer influence (declared on the component API) |
| interactive | boolean | true | Track pointer movement when true |
| minHeight | number | 280 | Minimum height of the mesh container in pixels |
| children | ReactNode | undefined | Foreground content above the decorative mesh |