Shaders
header.lightDarkMode D
Gallery

A dynamic aurora-like shader effect dominated by luminous, flowing waves of green and purple light against a deep dark-blue to black background. The primary visual element is a large, glowing green mass in the center-right portion of the image with soft, diffused edges that fade into the dark background. Overlaying this green glow is a distinctive purple-to-cyan gradient arc that curves across the upper portion, creating a ribbon-like aurora effect with high luminosity and a subtle waviness. The green light exhibits a bright, almost neon quality with significant glow and bloom, while the purple arc maintains a more ethereal, translucent appearance. The entire composition has a soft, out-of-focus quality with gentle gradients and no hard edges, creating an atmospheric, otherworldly mood. A subtle film grain texture is applied across the entire surface, adding a slight noise pattern that enhances the organic, natural feel. The lighting appears to emanate from within the green mass, with the purple arc acting as a secondary light source creating depth and dimensionality. The overall effect suggests a bioluminescent or celestial phenomenon with smooth, undulating motion captured in a single 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.33, y: 0.36 }" color-a="#8d54ff" color-b="#29ff8d" color-c="#1122d9" color-space="oklab" :height="84" :intensity="75" :ray-density="24" :seed="14" :speed="5.6" :waviness="78" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>