Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrAurora } from 'ngwr/aurora';Playground
<wr-aurora
[amplitude]="1"
[blend]="0.5"
[speed]="1"
/>Customize
Stop A
Stop B
Stop C
Amplitude
Blend
Speed
API
| Name | Description | Type | Default |
|---|---|---|---|
colorStops | Exactly three colour stops, ramped left → right. Unset, the theme decides: deep violet/emerald on light, the neon reactbits palette on dark. | readonly string[] | null | null |
amplitude | Wave height multiplier. | number | 1 |
blend | Softness of the aurora's lower edge, 0..1. | number | 0.5 |
speed | Time multiplier. | number | 1 |
CSS variables
Custom properties ngwr/aurora publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-aurora-stop-1 | #6366f1 | .wr-aurora +1 variant override |
--wr-aurora-stop-2 | #10b981 | .wr-aurora +1 variant override |
--wr-aurora-stop-3 | #6366f1 | .wr-aurora +1 variant override |