Backgrounds
Ripples
A dark liquid surface. Click or tap to drop rings that spread and bend the light below; when nobody is touching, it rains softly.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Ripples } from '@vizzele/react/gl';
<Ripples rain speed={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
rain | boolean | true | Drops fall on their own while idle. |
speed | number | 1 | How fast rings travel. |
decay | number | 1 | How quickly rings fade. |
intensity | number | 1 | Brightness. |
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.
- Clicks pass straight through to the content on top; the surface listens on the window and only reacts inside its own box.