Shaders
header.lightDarkMode D
Gallery

A vibrant, fluid abstract shader effect featuring swirling organic forms with soft, blurred transitions between colors. The composition displays a dynamic interplay of lime-green and deep magenta/burgundy tones that create a sense of movement and energy. The left side features cooler cyan and light-blue gradients that transition smoothly into warmer yellow and orange hues in the center-right area. Multiple blob-like shapes with soft edges overlap and blend together, creating a three-dimensional appearance enhanced by subtle highlights and depth. The effect incorporates wave distortion that creates undulating, rippling patterns across the surface, while chromatic aberration introduces subtle color fringing at the edges of forms, adding visual complexity. A fine film grain texture overlays the entire composition, providing subtle noise and tactile quality. The overall atmosphere is ethereal and dreamlike, with soft focus and smooth color gradients creating a sense of flowing, morphing liquid or gas. The blending modes create areas of color saturation variation, with some regions appearing more vivid while others fade into softer, more muted tones.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="35" color-a="#67f154" color-b="#7a0d28" color-space="oklch" :detail="2.4" :speed="0.4" />
    <Blob :center="{ x: 0.23, y: 0.46 }" color-a="#c4af12" color-b="#6ad2ce" color-space="oklch" :deformation="1" highlight-color="#ffffff" :highlight-intensity="0.4" :highlight-z="0.5" :size="0.95" :softness="1.2" :speed="0.3" :visible="true" />
    <WaveDistortion :angle="15" edges="mirror" :frequency="2.2" :speed="0.8" :strength="0.25" :visible="true" />
    <FlowField :detail="1.1" :speed="0.6" :strength="0.1" />
    <ChromaticAberration :angle="212" :blue-offset="0.8" :green-offset="-2" :red-offset="1.9" :strength="0.25" />
    <FilmGrain />
  </Shader>
</template>