← All components
Atmospheres / background
Aurora
Soft curtains of color, shaped by a three-stop gradient and flowing noise.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Give the component a container with an explicit height. It fills that container.
- The included Demo.tsx recreates the complete preview; the main component contains only the background.
- Reduced motion renders a still frame. Hidden/offscreen instances stop requesting frames; pause and replay are supported.
- A static CSS atmosphere remains when graphics acceleration is unavailable. Canvas resolution is capped at 2048 pixels per dimension.
React 19WebGL2OGL 1.0.11
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color1 | string | undefined | First color; overrides corresponding colorStops item. |
color2 | string | undefined | Center color; overrides corresponding colorStops item. |
color3 | string | undefined | Last color; overrides corresponding colorStops item. |
amplitude | number | 1 | Wave amplitude |
blend | number | 0.5 | Edge blend |
speed | number | 1 | Motion speed |
colorStops | string[] | ['#5227FF','#7cff67','#5227FF'] | Three gradient stops. Individual color1/2/3 overrides take precedence. |
time | number | undefined | Externally controlled time in original time units; output time = time × speed × 0.1. Disables continuous frames. |
paused | boolean | false | Freeze the current frame. |
replayToken | number | 0 | Change this value to restart the animation. |
className | string | '' | Additional outer classes. |