Shaders
header.lightDarkMode D
Gallery

A dynamic, fluid shader effect dominated by soft, blurred organic shapes in cool tones. The composition features a prominent deep blue blob-like form in the center-right area with a bright white highlight creating a glossy, three-dimensional appearance. The background transitions smoothly from light cyan on the left to deeper purple-blue tones on the right. Swirling patterns create a sense of motion and turbulence throughout, with the Swirl component generating subtle vortex-like distortions that blend the cyan (#90c8cf) and dark purple (#3d3a6b) base colors. A WaveDistortion effect at 114 degrees adds rippling undulations across the entire composition, creating a liquid, water-like quality. The Blob component (centered at approximately 60% horizontal, 94% vertical) displays vibrant blue gradients (#012afc to #1b6dd9) with soft edges and internal deformation. Chromatic aberration introduces subtle color fringing at the edges of shapes, with red and blue channel offsets creating a slight 3D anaglyph effect. Fine film grain texture overlays the entire image, adding subtle noise and tactile quality. The overall atmosphere is ethereal and dreamlike, with soft focus and smooth color transitions creating a sense of depth and movement. The effect suggests liquid dynamics, atmospheric phenomena, or abstract digital fluid simulation.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="45" color-a="#90c8cf" color-b="#3d3a6b" color-space="hsv" :detail="1.8" :speed="0.8" />
    <Blob :center="{ x: 0.6, y: 0.94 }" color-a="#012afc" color-b="#1b6dd9" color-space="oklch" :deformation="0.8" highlight-color="#ffffff" :highlight-intensity="0.3" :highlight-x="0.4" :highlight-y="-0.4" :highlight-z="0.6" :seed="17" :size="0.95" :softness="2" :speed="0.9" />
    <WaveDistortion :angle="114" edges="mirror" :frequency="1.7" :speed="1.8" />
    <ChromaticAberration :angle="45" :blue-offset="1.2" :red-offset="-1.2" :strength="0.015" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>