# Aurora Flow

> Procedural WebGL hero background with layered silk flow, diffused aurora light, film grain and a soft pointer bend, with twelve palette presets.

A single full-screen WebGL quad renders warped fbm fields into silk folds, a traveling bloom and an ambient lift. Move the pointer over it to bend the flow toward the cursor; turn on `scroll-interaction` to add page-scroll parallax.

<demo-aurora-flow>



</demo-aurora-flow>

## Installation

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

## Usage

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

<template>
  <AuroraFlow preset="ocean" class="min-h-150">
    <div class="flex size-full items-center justify-center">
      <h1 class="text-5xl font-semibold text-white">Vue ✦ nxui</h1>
    </div>
  </AuroraFlow>
</template>
```

Colors you pass in `colors` replace the preset colors by position (base, depth, flow, light, sheen). Invalid hex values fall back to the preset. The canvas caps pixel density at 1.75, pauses when it leaves the viewport or the tab is hidden, and draws one static frame when `prefers-reduced-motion` is set.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        readonly string[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Up to five hex colors that override the preset.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        preset
      </code>
    </td>
    
    <td>
      <code>
        AuroraFlowPreset
      </code>
    </td>
    
    <td>
      <code>
        'ocean'
      </code>
    </td>
    
    <td>
      <code>
        ocean
      </code>
      
      , <code>
        aurora
      </code>
      
      , <code>
        sky
      </code>
      
      , <code>
        cloud
      </code>
      
      , <code>
        sunset
      </code>
      
      , <code>
        midnight
      </code>
      
      , <code>
        ice
      </code>
      
      , <code>
        dream
      </code>
      
      , <code>
        nebula
      </code>
      
      , <code>
        emerald
      </code>
      
      , <code>
        lavender
      </code>
      
      , <code>
        mono
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Global motion speed (0–3).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Strength of the flowing color and silk highlights (0–2).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Final canvas opacity (0–1).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        blur
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Diffusion softness of the atmospheric fields (0.25–2).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        contrast
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.04
      </code>
    </td>
    
    <td>
      Final color contrast (0.6–1.6).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Final scene brightness (0.5–1.5).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Turns on fine film grain.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.22
      </code>
    </td>
    
    <td>
      Grain strength (0–1).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layers
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      fbm octaves, rounded and clamped to 3–7.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flow-scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Scale of the broad structures (0.35–2.5).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flow-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Strength of the domain warp and silk folds (0–2).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flow-direction
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        -18
      </code>
    </td>
    
    <td>
      Main flow direction in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animation-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Fine multiplier for the procedural motion (0–3).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pointer-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Bends the flow toward the pointer.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pointer-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.7
      </code>
    </td>
    
    <td>
      Maximum pointer influence (0–1.5).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scroll-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Shifts the field as the page scrolls.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        parallax-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Scroll parallax strength (0–1.5).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lighting
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Turns on the traveling bloom.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lighting-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Bloom brightness (0–2).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lighting-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Bloom radius (0.3–2).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lighting-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Bloom travel speed (0–2).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ambient-glow
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Turns on the central ambient lift.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ambient-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.7
      </code>
    </td>
    
    <td>
      Ambient lift strength (0–1.5).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Turns on low-frequency haze.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.16
      </code>
    </td>
    
    <td>
      Haze strength (0–1).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise-scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Haze scale (0.4–3).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        vignette
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Turns on the soft edge falloff.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        vignette-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.55
      </code>
    </td>
    
    <td>
      Edge falloff strength (0–1.5).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-radius
      </code>
    </td>
    
    <td>
      <code>
        string | number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Radius of the container. Numbers are pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Extra classes for the root. The root has <code>
        min-h-105
      </code>
      
       by default.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Content drawn above the canvas, full size.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas and its static fallback are `aria-hidden`; put real content in the default slot.
- With `prefers-reduced-motion: reduce` the animation, pointer bend and scroll parallax stop, and one static frame is drawn.
- Without WebGL, a static radial gradient built from the same palette is shown.
- Ported from [componentry.fun](https://componentry.dev/docs/components/aurora-flow) by Harsh Jadhav.