# Soft Aurora

> Soft aurora band built from 3D Perlin noise that reaches toward the cursor and carries click pulses.

A soft aurora band drawn from two layers of 3D Perlin noise and tinted with cosine gradient palettes, in one raw WebGL2 shader. It blooms in from a thin line on mount. Bring the cursor close and the band reaches toward it; click to send a pulse of light along it. `light-mode` prints it as soft colored ink for light pages. Pick a preset in the demo panel, or press refresh to replay the intro.

<demo-soft-aurora>



</demo-soft-aurora>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/soft-aurora.json"
```

## Usage

```vue
<script setup lang="ts">
  import SoftAurora from '~/components/ui/soft-aurora/SoftAurora.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <SoftAurora
      color1="#f7f7f7"
      color2="#e100ff"
      :speed="0.6"
      :band-height="0.5"
      :click-pulse="true"
    />
  </div>
</template>
```

The demo presets ship with the component: `softAuroraPreset('borealis')` returns the look of the Classic, Borealis, Dusk, Mono, Ribbon, Halo or Calm preset. Pass `true` as the second argument to get the light-page colors.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        color1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#f7f7f7'
      </code>
    </td>
    
    <td>
      Tint of the first aurora layer. Hex or <code>
        rgb()
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#e100ff'
      </code>
    </td>
    
    <td>
      Tint of the second aurora layer. Hex or <code>
        rgb()
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spectrum
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How much of the shifting rainbow shows through the tints. 0 uses the colors.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Overall animation speed.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How fast the colors drift along the band.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Scale of the noise that shapes the band.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall brightness.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise-frequency
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2.5
      </code>
    </td>
    
    <td>
      How tightly the band ripples.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise-amplitude
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How far the band waves up and down.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        band-height
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Vertical position of the band, from 0 at the bottom to 1 at the top.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        band-spread
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How tight and bright the band is. Lower values spread it into a soft glow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Tilts the band by this many degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        octave-decay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.1
      </code>
    </td>
    
    <td>
      How much fine ripple sits on top of the large waves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layer-offset
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Shifts the second layer in time so the two separate.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        enable-mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The aurora drifts with the cursor and reaches toward it when it comes close.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-influence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      Strength of the cursor drift and reach.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-pulse
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking sends a soft pulse of light along the band.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The band starts as a thin line and blooms in on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Prints the aurora as soft colored ink so it sits on light pages.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall opacity, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes merged on the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and marked `aria-hidden="true"`. Put real content above it.
- Pointer listeners are passive and sit on `window`, so clicks still reach content above the aurora.
- With `prefers-reduced-motion: reduce` there is no intro and no click pulse, and the aurora drifts at a third of its speed.
- The render loop stops when the aurora is settled, offscreen or in a hidden tab, and it recovers from a lost WebGL context.
- Ported from [React Bits](https://reactbits.dev/backgrounds/soft-aurora) by David Haz.