Northern Lights 3

A dark, atmospheric shader effect featuring a predominantly black and dark blue background with a vibrant aurora-like phenomenon emanating from the upper right quadrant. The aurora displays a striking gradient transitioning from purple (#8d54ff) through bright cyan-green (#29ff8d) to deep blue (#1122d9), creating a luminous curtain-like effect. The aurora has soft, wavering edges with high waviness (193) that creates an organic, flowing appearance reminiscent of northern lights. The effect is layered over a subtle swirl component using very dark navy tones (#0b1329, #0c0f17) that provides depth and texture. A fine film grain overlay (0.1 strength) adds subtle noise texture throughout. The aurora uses a linearDodge blend mode with 83% intensity, creating a glowing, additive light effect that appears to radiate outward. The center point is positioned slightly above center (y: 0.278), and the overall composition creates a moody, ethereal atmosphere with high contrast between the dark background and the luminous colored rays. The effect suggests movement and energy despite being a static frame.

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="58" :speed="5.6" :waviness="193" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>