Vibrant Waves 8

A vibrant gradient shader effect featuring smooth, flowing wave-like distortions that sweep diagonally across the composition from upper left to lower right. The primary color palette transitions from warm yellow-orange tones in the upper left corner, through lime green in the lower left, to cool blue and purple hues dominating the right side and upper right. The waves create a sense of fluid motion with soft, blurred edges that blend seamlessly between color zones. Multiple layered wave distortions create depth and complexity, with the sawtooth wave distortion adding subtle linear striations perpendicular to the main flow. A blob element with green-to-blue gradient is positioned in the lower left area, contributing to the organic, flowing aesthetic. The overall effect has a soft, ethereal quality enhanced by the tilt-shift blur that creates a focal plane effect across the middle of the composition. Fine film grain texture is subtly applied throughout, adding a cinematic quality. The hue shift transformation shifts the color palette, creating the distinctive purple-blue dominance on the right side. The composition suggests flowing energy or liquid motion with a modern, digital aesthetic.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="52" color-a="#d4880a" color-b="#c41a1a" color-space="oklch" />
    <WaveDistortion :angle="58" edges="wrap" :frequency="1.7" :strength="0.18" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="142" edges="mirror" :frequency="14" :speed="0.3" wave-type="sawtooth">
        <Blob :center="{ x: 0.15, y: 0.92 }" color-a="#2ee8a5" color-b="#3a1bb8" :deformation="0.7" highlight-color="#ffc61a" :highlight-x="0.5" :size="0.8" :softness="1" />
      </WaveDistortion>
    </WaveDistortion>
    <HueShift :shift="-128" />
    <TiltShift :angle="185" :center="{ x: 0.38, y: 0.62 }" :intensity="100" :width="0.5" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>