Galaxy Swirl
Galaxy SwirlA dynamic, ethereal gradient shader effect featuring a smooth transition between deep blue and vibrant purple hues. The composition centers on a luminous blue-white glow positioned in the lower-left quadrant, creating a soft radiant light source that bleeds outward. The background transitions from dark navy blue at the top through rich purple tones on the left and right edges, with the central area dominated by bright cyan-blue light. A subtle fog effect creates atmospheric depth and soft color blending throughout, with the turbulent noise pattern giving the gradient an organic, cloud-like quality. Floating white particles with subtle twinkling effects are scattered across the composition, appearing as small stars or dust motes. A gentle vignette darkens the outer edges, particularly noticeable at the corners and periphery, creating depth and drawing focus toward the luminous center. Fine film grain texture adds subtle noise throughout, enhancing the cinematic quality. The overall mood is cosmic and serene, with a dreamlike quality enhanced by the soft edges and smooth color transitions. The lighting suggests a glowing orb or light source beneath the surface, creating an otherworldly, space-like atmosphere.
Code
<script setup lang="ts">
import {
Shader,
Blob,
FilmGrain,
FloatingParticles,
Fog,
SolidColor,
Vignette
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<SolidColor color="#050418" />
<Fog color-a="#0243cc" color-b="#7c1fff" :detail="6" :seed="270" :turbulence="2.05" :visible="true" />
<Blob blend-mode="screen" :center="{ x: 0.25, y: 0.62 }" color-a="#3b5aff" color-b="#4a82ff" :deformation="0.95" highlight-color="#8fb8ff" :highlight-intensity="0.3" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.6" :opacity="0.7" :seed="42" :size="0.6" :softness="2.5" :speed="1.5" :visible="true" />
<FloatingParticles :angle-variance="53" blend-mode="screen" :count="3" :opacity="0.7" :particle-density="1.9" :particle-size="0.8" :speed="0.1" :speed-variance="0.2" :twinkle="0.8" :visible="true" />
<Vignette :intensity="0.55" :visible="true" />
<FilmGrain :strength="0.05" />
</Shader>
</template>