Shaders
header.lightDarkMode D
Gallery

A vibrant, fluid gradient shader effect featuring soft, organic color transitions across the entire canvas. The composition displays a dynamic swirl of purple and magenta tones on the left side that smoothly blend into cyan and turquoise in the center, transitioning to yellow-green and mint green on the right side. The effect creates a dreamy, liquid-like appearance with smooth color gradients and soft edges. A prominent blob-like form with subtle 3D highlights appears in the upper-right quadrant, centered around coordinates (0.65, 0.35), adding depth and dimension. Wave distortions create subtle undulating patterns throughout, giving the effect a flowing, water-like quality. The overall atmosphere is ethereal and pastel-like, with soft focus and gentle color bleeding between regions. Chromatic aberration introduces slight color separation at the edges, creating a subtle iridescent quality. Fine film grain texture overlays the entire composition, adding a subtle noise pattern that prevents the effect from appearing too smooth or artificial. The color transitions are smooth and organic, with no hard edges, creating a cohesive, unified visual experience.

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="#7907bc" color-b="#2bb3c4" color-space="oklch" :detail="2.4" :speed="0.4" />
    <Blob :center="{ x: 0.65, y: 0.35 }" color-a="#50c3a3" color-b="#39c1c1" color-space="oklch" :deformation="0.75" highlight-color="#ffffff" :highlight-intensity="0.4" :highlight-z="0.5" :size="0.85" :softness="1.2" :speed="0.3" :visible="true" />
    <WaveDistortion :angle="167" 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>