Shaders
header.lightDarkMode D
Gallery

A vibrant, fluid gradient shader effect dominated by warm tones transitioning smoothly across the canvas. The primary visual composition features a large, soft-edged blob centered toward the upper-right area (approximately 72% horizontally) that radiates from yellow-green at the edges to bright yellow in the core, with a subtle white highlight creating depth and dimensionality. A swirling motion effect creates organic, flowing patterns that blend red-magenta tones with cyan-green hues, particularly visible in the lower-left quadrant where sharp color transitions occur. The wave distortion effect at 144 degrees creates subtle undulating ripples across the entire surface, giving the impression of liquid movement. A diagonal gradient sweeps from the upper-left (bright lime-green and cyan) through the center (golden yellow) to the lower-right (deep orange and coral-red). The chromatic aberration effect introduces slight color fringing at high-contrast edges, with red shifting left and blue shifting right, creating a subtle 3D separation effect. Fine film grain texture overlays the entire composition, adding subtle noise that prevents the gradients from appearing too smooth and artificial. The overall atmosphere is energetic and dynamic, with soft blurs and smooth color transitions creating a dreamy, liquid quality. The color space transitions between HSV (for the swirl) and OKLCH (for the blob) create natural, perceptually smooth color blending.

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="#ff0040" color-b="#00ff88" color-space="hsv" :detail="1.8" :speed="0.8" />
    <Blob :center="{ x: 0.72, y: 0 }" color-a="#ffe600" color-b="#ff00d5" 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="0.85" :speed="0.9" />
    <WaveDistortion :angle="144" edges="mirror" :frequency="1.6" :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>