Shaders
header.lightDarkMode D
Gallery

A mesmerizing abstract shader effect featuring a dominant dark navy background (#0e0724) with swirling, organic blob-like formations in deep purple and magenta tones. The composition shows flowing, wave-like distortions that create a sense of liquid motion and fluidity. A prominent spherical element on the left side exhibits glossy, reflective properties with highlights in golden-orange (#ffa929) and electric blue (#4c71fc) light sources. The effect incorporates multiple layers of godrays emanating from different focal points - one with dark blue rays and another with warm orange rays - creating volumetric light streaks that sweep across the composition. Wave distortion effects create rippling, undulating patterns throughout the surface, giving the impression of a three-dimensional, malleable form. Chromatic aberration adds subtle color fringing along edges, enhancing the sense of depth and optical complexity. Fine film grain texture overlays the entire composition, adding a subtle noise quality. Floating particles with high twinkle values create scattered starlike points of light using a linear dodge blend mode. The overall atmosphere is cosmic and ethereal, with a balance between cool dark tones and warm accent lighting, suggesting a surreal, otherworldly environment.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  ChromaticAberration,
  FilmGrain,
  FloatingParticles,
  Godrays,
  SolidColor,
  Spherize,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0e0724" :visible="true" />
    <Blob :center="{ x: 0.53, y: 0.58 }" color-a="#0d193d" color-b="#0a0526" color-space="oklch" :deformation="1" :highlight-intensity="0" :size="0.65" :softness="1" :visible="true" />
    <FloatingParticles blend-mode="linearDodge" :opacity="0.05" :particle-size="1" :particle-softness="0.15" :randomness="0.01" :speed="0" :twinkle="0.77" />
    <ChromaticAberration :angle="29" :red-offset="1" :strength="0.02">
      <Spherize :center="{ x: 0.11, y: 1 }" :depth="3" light-color="#4c71fc" :light-intensity="0.98" :light-position="{ x: 0.17, y: 0.1 }" :light-softness="0" :radius="2.2">
        <Godrays background-color="#050208" :center="{ x: 0.39, y: 0.49 }" :density="0.05" :intensity="0.74" ray-color="#010640" :speed="-1" :visible="true" />
        <Godrays blend-mode="normal-oklch" :center="{ x: 0.86, y: 0.15 }" :density="0.58" :intensity="0.82" ray-color="#ffa929" :speed="0.25" :visible="true" />
        <WaveDistortion :angle="195" edges="mirror" :frequency="7.9" :speed="0.3" :strength="0.21" :visible="true" />
      </Spherize>
    </ChromaticAberration>
    <FilmGrain :strength="0.03" :visible="true" />
  </Shader>
</template>