Northern Lights 2

A dynamic aurora-like shader effect featuring a sweeping gradient beam that flows diagonally across a dark background. The primary visual element is a luminous band with soft, feathered edges that transitions from vibrant purple (#8d54ff) on the left edge through bright cyan-green (#29ff8d) in the center to deep blue (#1122d9) tones. The effect has a strong glow and bloom characteristic, with the colors bleeding softly into the surrounding dark navy-black background (#0b1329, #0c0f17). The aurora beam appears to have organic waviness and undulation, creating a curtain-like effect with approximately 193 units of waviness. The overall composition suggests movement and fluidity, with the beam positioned at roughly 27% from the top of the frame. A subtle film grain texture overlays the entire effect, adding a cinematic quality. The blend mode is set to linear dodge, creating an additive lighting effect where the bright colors appear to emit light. The atmosphere is ethereal and cosmic, evoking natural phenomena like the northern lights or plasma energy.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Aurora,
  FilmGrain,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#0b1329" color-b="#0c0f17" :detail="1.6" />
    <Aurora :balance="73" blend-mode="linearDodge" :center="{ x: 0, y: 0.28 }" color-a="#8d54ff" color-b="#29ff8d" color-c="#1122d9" color-space="oklab" :curtain-count="1" :intensity="83" :ray-density="7" :seed="14" :speed="5.6" :waviness="193" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>