Northern Lights 4

A dark, atmospheric shader effect featuring a predominantly black and dark blue gradient background occupying the upper 60% of the image. The lower portion displays a luminous aurora-like phenomenon with a curved, wave-like structure. The aurora features a vibrant gradient transitioning from green (#29ff8d) on the left side through cyan and purple (#8d54ff) tones in the center, with hints of deep blue (#1122d9) creating depth. The effect has a soft, glowing quality with feathered edges that fade into the dark background, creating a sense of atmospheric light bending around a curved horizon. The waviness parameter (193) creates undulating, organic ripples across the light band, giving it a fluid, dynamic appearance. A subtle film grain texture overlays the entire composition, adding a cinematic quality and slight noise throughout. The lighting uses a linear dodge blend mode, making the aurora appear to emit light rather than reflect it, creating an ethereal, otherworldly glow. The effect suggests a northern lights or bioluminescent phenomenon viewed against a night sky.

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="77" blend-mode="linearDodge" :center="{ x: 0.47, y: 0.97 }" color-a="#8d54ff" color-b="#29ff8d" color-c="#1122d9" color-space="oklab" :curtain-count="1" :intensity="83" :ray-density="7" :seed="21" :speed="5.6" :waviness="193" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>