Backgrounds
Aurora
Curtains of northern light rippling over a starry sky. They lean toward the pointer and glow brighter under it.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Aurora } from '@vizzele/react/gl';
<section style={{ position: 'relative' }}>
<Aurora bands={3} height={0.45} />
<h1>Night shift</h1>
</section>Props
| Prop | Type | Default | Description |
|---|---|---|---|
bands | number | 3 | Light curtains (1–5). |
height | number | 0.45 | Where the curtains hang, 0 bottom … 1 top. |
speed | number | 0.3 | Drift speed. |
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.