import { Component } from '@angular/core';
import { WrAurora } from 'ngwr/bits/aurora';
@Component({ imports: [WrAurora] })
export class MyComponent {}Aurora
An animated aurora background for a hero or a section.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
Put it in a positioned box with a height; it fills that box.
<div style="position: relative; min-height: 18rem; overflow: hidden">
<wr-aurora
[amplitude]="1"
[blend]="0.5"
[speed]="1"
/>
</div>Customize
Stop A
Stop B
Stop C
Amplitude
Blend
Speed
API
| Name | Description | Type | Default |
|---|---|---|---|
colorStops | Three colour stops, from left to right. Unset, they follow the theme. | 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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/aurora's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-aurora-stop-1 | light-dark(#6366f1, #5227ff) | .wr-aurora |
--wr-aurora-stop-2 | light-dark(#10b981, #7cff67) | .wr-aurora |
--wr-aurora-stop-3 | light-dark(#6366f1, #5227ff) | .wr-aurora |
See also
Animation WavesDrifting lines behind your content that bend around the pointer.Animation Splash CursorA fluid simulation that splashes colour where the pointer moves.Animation Split TextReveals text piece by piece when it scrolls into view.Util resolveCssColorResolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.