Backgrounds
Wave lines
Dozens of fine lines rolling like an ocean of sound, iridescent along their length. The pointer lifts them and sends a ring outward.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { WaveLines } from '@vizzele/react/gl';
<WaveLines lines={42} amplitude={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 42 | Number of lines. |
amplitude | number | 1 | Wave height. |
speed | number | 0.4 | Wave speed. |
thickness | number | 1.2 | Line thickness (CSS px). |
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.