Shaders
header.lightDarkMode D
Gallery

A vibrant, fluid abstract shader effect featuring smooth, organic wave-like patterns flowing diagonally across the composition. The image displays a dynamic gradient transitioning between hot pink (#ff006e), electric blue (#0066ff), and cyan (#00d9ff) colors with warm orange and yellow tones emerging on the right side. The swirling patterns create a sense of motion and fluidity, with soft, blurred edges that suggest a glow effect applied throughout. A luminous blob-like form with yellow-to-magenta coloring is positioned in the upper-right quadrant, adding dimensional depth. The overall aesthetic is smooth and dreamlike with subtle wave distortions creating rippling effects across the surface. Fine film grain texture is subtly visible, adding a slight grittiness to the otherwise smooth gradients. Chromatic aberration creates minimal color fringing at high-contrast edges. The composition has a modern, neon-inspired aesthetic with a soft, ethereal quality enhanced by the screen blend mode glow effect. The spatial arrangement suggests flowing liquid or energy moving from lower-left to upper-right with organic, undulating motion.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FilmGrain :animated="0" :strength="0.15">
      <Glow blend-mode="screen" :intensity="0.14" :size="15" :threshold="0.35">
        <Swirl :coarse-x="40" :coarse-y="40" color-a="#ff006e" color-b="#0066ff" color-c="#00d9ff" color-space="oklch" :complexity="5.5" :detail="2.5" :fine-x="65" :fine-y="65" :medium-x="60" :medium-y="60" :scale="1" :speed="0.8" />
        <Blob :center="{ x: 0.85, y: 0.55 }" color-a="#ffff00" color-b="#ff0080" color-space="oklch" :deformation="1" highlight-color="#ffffff" :highlight-intensity="0.8" :highlight-x="0.5" :highlight-y="-0.5" :highlight-z="0.8" :opacity="0.9" :seed="42" :size="0.54" :softness="1" :speed="1.2" :visible="true" />
        <WaveDistortion :angle="45" edges="mirror" :frequency="6" :speed="2.5" :strength="0.15" :visible="true" />
        <ChromaticAberration :blue-offset="1.5" :red-offset="-1.5" :strength="0.02" :visible="true" />
      </Glow>
    </FilmGrain>
  </Shader>
</template>