Shaders
header.lightDarkMode D
Gallery

A smooth, flowing gradient shader effect featuring a soft blend of cyan and magenta tones with organic, undulating shapes. The composition shows a large swirling vortex pattern emanating from the upper left, transitioning through purple and pink hues toward the lower right. A prominent blob-like formation is centered slightly right and below the middle, creating a luminous focal point with soft, feathered edges. The overall effect has a dreamy, ethereal quality with subtle wave distortions creating gentle ripples across the surface. Fine film grain texture adds subtle noise throughout. Chromatic aberration creates minimal color fringing at edges, enhancing depth perception. The colors flow seamlessly using oklab color space for smooth transitions between the cool cyan (#76d3f5, #7dd3fc) and warm magenta/purple tones (#b569ff, #e0aaff). The effect appears to be gently animated with soft, organic movement. Highlights suggest a three-dimensional quality with subtle lighting from the upper left. The overall mood is calming and contemporary, with a vaporwave aesthetic.

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="#76d3f5" color-b="#b569ff" color-space="oklab" :detail="1.8" :speed="0.8" />
    <Blob :center="{ x: 0.72, y: 0.62 }" color-a="#7dd3fc" color-b="#e0aaff" color-space="oklab" :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.15" :softness="2.4" :speed="0.9" />
    <WaveDistortion :angle="122" edges="mirror" :frequency="2.4" :speed="1.8" :strength="0.18" />
    <ChromaticAberration :angle="45" :blue-offset="1.2" :red-offset="-1.2" :strength="0.015" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>