Vibrant Waves 5

A vibrant gradient shader effect featuring diagonal flowing bands of color that sweep across the composition from upper-left to lower-right. The primary color palette transitions smoothly from warm orange-brown tones (#cd8725) in the upper-left corner through peachy-red hues (#e9132d) to cool cyan-green (#7cfaae) in the center, and finally to deep blue (#3948d4) in the lower-right corner. The effect creates a sense of dynamic motion through layered wave distortions with a sine wave pattern at 149 degrees and a high-frequency sawtooth wave at 203 degrees, producing fine linear striations across the surface. A soft-focus tilt-shift blur is applied at a 155-degree angle, creating depth and emphasizing the central region while the edges fade slightly. The blob element positioned at coordinates (0.573, 0.839) adds organic luminosity with a golden-yellow highlight (#ffc61a) that creates a subtle 3D sphere-like appearance. A light film grain texture (0.2 strength) adds subtle noise throughout, enhancing the cinematic quality. The overall effect suggests flowing light rays or aurora-like phenomena with smooth color transitions and a polished, modern aesthetic. The composition maintains full opacity with normal blending, creating a cohesive, seamless visual experience.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#cd8725" color-b="#e9132d" color-space="oklch" />
    <WaveDistortion :angle="149" edges="wrap" :frequency="1.5" :strength="0.2" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="203" edges="mirror" :frequency="15" :speed="0.3" wave-type="sawtooth">
        <Blob :center="{ x: 0.57, y: 0.84 }" color-a="#7cfaae" color-b="#3948d4" :deformation="0.7" highlight-color="#ffc61a" :highlight-x="0.5" :size="0.8" :softness="1" />
      </WaveDistortion>
    </WaveDistortion>
    <TiltShift :angle="155" :center="{ x: 0.5, y: 0.45 }" :intensity="80" :width="0.5" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>