Nightlight 3

A deep, atmospheric gradient shader effect transitioning from nearly black dark purple in the upper left (#120524) to a richer blue-purple tone in the lower right. The composition features a subtle swirling pattern with two primary color bands: a vibrant electric blue-purple (#6057fa) and a deeper indigo (#3d06b8) that blend together using oklch color space, creating smooth chromatic transitions. The swirl effect has fine horizontal detail (fineX: 13) combined with medium vertical smoothness, producing an organic, flowing distortion pattern that moves across the canvas. A delicate film grain texture with 0.04 strength is overlaid throughout, adding subtle noise and texture to break up the smoothness and create visual depth. The overall mood is cosmic and ethereal, with a sense of movement and depth despite the static nature of the image. The blend mode interactions create soft, seamless color transitions without harsh edges. The effect suggests a nebula or aurora-like phenomenon with a professional, polished appearance.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#120524" />
    <Circle id="idmi41ycmwlpbvzemcm" blend-mode="normal-oklch" :center="{ x: 1, y: 0.5 }" :radius="2" :softness="2" :visible="false" />
    <Swirl :coarse-x="50" :coarse-y="50" color-a="#6057fa" color-b="#3d06b8" color-space="oklch" :fine-x="13" :fine-y="50" mask-source="idmi41ycmwlpbvzemcm" :medium-x="50" :medium-y="50" />
    <FilmGrain :strength="0.04" />
  </Shader>
</template>