Nightlight

A deep, atmospheric gradient shader effect transitioning from very dark navy/black at the edges to a rich blue-purple center. The composition features a subtle swirl pattern with flowing gradients between vibrant purple (#6057fa) and deep indigo (#3d06b8) that creates organic, wave-like distortions throughout the canvas. The effect has a soft, ethereal quality with smooth color transitions and no harsh edges. A fine film grain texture overlays the entire surface at low opacity (0.04), adding subtle noise and visual texture that enhances the cinematic quality. The overall mood is dark, mysterious, and cosmic, with the swirl effect creating a sense of motion and depth despite the static nature of the image. The color space uses OKLCH for smooth perceptual blending, resulting in natural color transitions. The background solid color (#120524) provides a nearly black foundation that anchors the brighter purple-blue swirl effects above it.

<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: 0.5, y: 1 }" :radius="2" :softness="2" :visible="false" />
    <Swirl :coarse-x="50" :coarse-y="50" color-a="#6057fa" color-b="#3d06b8" color-space="oklch" :detail="0.5" :fine-x="13" :fine-y="50" mask-source="idmi41ycmwlpbvzemcm" :medium-x="50" :medium-y="50" />
    <FilmGrain :strength="0.04" />
  </Shader>
</template>