# Aurora

> An animated aurora background for a hero or a section.

Source: https://ngwr.dev/bits/aurora  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrAurora } from 'ngwr/bits/aurora';

@Component({ imports: [WrAurora] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/aurora';
```

## Playground

Put it in a positioned box with a height; it fills that box.

```angular-html
<div style="position: relative; min-height: 18rem; overflow: hidden">
  <wr-aurora
    [amplitude]="1"
    [blend]="0.5"
    [speed]="1"
  />
</div>
```

```angular-ts
import { Component } from '@angular/core';

import { WrAurora } from 'ngwr/bits/aurora';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrAurora],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## 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

- [Waves](https://ngwr.dev/bits/waves) — Drifting lines behind your content that bend around the pointer.
- [Splash Cursor](https://ngwr.dev/bits/splash-cursor) — A fluid simulation that splashes colour where the pointer moves.
- [Split Text](https://ngwr.dev/bits/split-text) — Reveals text piece by piece when it scrolls into view.
- [resolveCssColor](https://ngwr.dev/reference/utils/resolve-css-color) — Resolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.