Dark and Stormy
Dark and StormyA deeply atmospheric shader effect dominated by dark, moody tones with a predominantly dark-blue and navy color palette. The image shows a soft, blurred composition with two luminous, rounded shapes that appear to be glowing orbs or bokeh-like elements rendered in muted blue-purple hues. The background is nearly black with subtle gradations of deep navy blue, creating a sense of depth and mystery. A vignette effect darkens the edges significantly, drawing focus toward the center where the glowing shapes are positioned. The overall aesthetic suggests a nighttime or cosmic environment with soft, diffused lighting. Fine film grain texture overlays the entire composition, adding a subtle analog quality. CRT screen effects with minimal scanlines create a retro-digital aesthetic without being overly pronounced. The FlowField component introduces subtle fluid distortion patterns that create organic, wave-like movements throughout the composition. Floating particles with low opacity and high softness contribute to a dreamy, ethereal quality. The lighting is predominantly ambient with low brightness (46%), creating a cinematic, low-key mood. The color palette emphasizes cool tones with the key color being a soft light-blue (#d5e4ea) that provides subtle highlights against the dark background.
Code
<script setup lang="ts">
import {
Shader,
CRTScreen,
FilmGrain,
FloatingParticles,
FlowField,
StudioBackground
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<StudioBackground :ambient-intensity="46" :back-intensity="36" :brightness="46" color="#1a1b38" :fill-angle="69" :fill-intensity="100" :fill-softness="100" :key-intensity="100" :key-softness="38" :light-target="0" :vignette="81" :wall-curvature="50" />
<FlowField :detail="0.6" :evolution-speed="5.2" :speed="3.3" :strength="0.5" />
<FloatingParticles :count="2" particle-color="#4274a6" :particle-density="0.9" :particle-size="0.5" :randomness="0.4" :speed="0" />
<CRTScreen :pixel-size="20" :scanline-intensity="0.1" />
<FilmGrain :strength="0.1" />
</Shader>
</template>