Shaders
header.lightDarkMode D
Gallery

A dynamic, fluid gradient shader effect featuring smooth color transitions across the entire canvas. The composition displays a swirling vortex pattern with a dominant purple-to-teal color gradient flowing diagonally from upper left to lower right. A bright lime-green blob with soft, organic edges is positioned in the upper-center area, creating a luminous focal point. The effect incorporates wave distortion that creates subtle undulating ripples throughout the composition, giving the impression of liquid movement. A bright magenta-to-purple swirl emanates from the left side, blending smoothly into yellow-green tones in the center, then transitioning to cyan and teal on the right. The overall aesthetic is highly saturated and vibrant with soft, feathered edges that fade to transparent at the boundaries. Chromatic aberration introduces subtle color fringing at high-contrast edges, while film grain adds a fine texture overlay. The lighting appears to have a subtle 3D quality with highlights suggesting depth, creating an almost holographic or iridescent appearance. The entire effect conveys fluidity, motion, and energy with a dreamlike, abstract quality.

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="#4e0149" color-b="#058d92" color-space="oklch" :detail="1.8" :speed="0.8" />
    <Blob :center="{ x: 0.48, y: 0 }" color-a="#7657f0" color-b="#79eb0b" 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="1.35" :softness="3" :speed="0.9" />
    <WaveDistortion :angle="144" edges="mirror" :frequency="1.8" :speed="1.8" :strength="0.45" />
    <ChromaticAberration :angle="45" :blue-offset="1.2" :red-offset="-1.2" :strength="0.015" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>