Vibrant Waves 4

A dynamic gradient shader effect featuring diagonal flowing waves and ribbons that sweep across the composition from upper left to lower right. The primary color palette transitions smoothly between vibrant lime-green (#b8ff00 range) on the left and upper edges, through cyan and light-blue tones in the center, to deep blue (#1275d8) and purple hues on the right side. The effect creates layered, undulating bands with soft, blurred edges that suggest motion and fluidity. Multiple wave distortions create a sawtooth pattern with high frequency ripples (frequency 10) overlaid on broader sine waves (frequency 1.6), producing a complex, organic texture. A subtle blob element with pink-magenta coloring (#ff005d, #e91e63) appears to be embedded within the wave structure, adding depth and dimensional variation. The tilt-shift effect creates a selective focus that enhances the sense of depth, while film grain adds subtle texture and visual noise throughout. The overall atmosphere is modern, energetic, and smooth, with a glossy, liquid-like quality. The diagonal angle of approximately 257 degrees creates a strong directional flow, and the 172-degree tilt-shift angle adds a cinematic quality to the composition.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-b="#f02b63" color-space="oklch" />
    <WaveDistortion :angle="257" edges="wrap" :frequency="1.6" :strength="0.1" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="48" edges="mirror" :frequency="10" :speed="0.3" wave-type="sawtooth">
        <Blob :center="{ x: 0.49, y: 1 }" color-a="#ff005d" :deformation="0.7" highlight-color="#ffc61a" :highlight-x="0.5" :size="0.8" :softness="1" />
      </WaveDistortion>
    </WaveDistortion>
    <HueShift :shift="-128" />
    <TiltShift :angle="172" :center="{ x: 0.46, y: 0.64 }" :intensity="100" :width="0.5" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>