Nightlight 2

A deep, atmospheric gradient shader effect transitioning from vibrant blue-purple tones on the left side to nearly black on the right side. The composition features a swirling, organic distortion pattern created by the Swirl component that blends two colors (#6057fa bright purple-blue and #3d06b8 deep dark blue) using oklch color space blending at 50% intensity. The swirl effect creates fluid, wave-like patterns that flow across the canvas with fine detail variations (fineX: 13, fineY: 50) generating intricate texture throughout. A dark navy base color (#120524) anchors the composition underneath. The overall effect is enhanced by subtle film grain (0.04 strength) that adds a cinematic texture and reduces banding. The masked circle element (currently invisible but structurally present) would normally constrain the swirl effect to a specific region. The lighting is moody and atmospheric, with no harsh edges or defined shapes-purely abstract color and texture manipulation. The blend mode uses normal-oklch for the swirl, preserving color relationships in perceptual color space. The result evokes a cosmic, nebula-like atmosphere with smooth color transitions and organic flowing distortions.

<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, 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>