Shaders
header.lightDarkMode D
Gallery

A 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

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