Vibrant Waves

A vibrant gradient shader effect featuring diagonal wave-like striations flowing from upper left to lower right. The composition displays smooth color transitions across multiple layers: deep magenta and pink tones dominate the left and bottom portions, transitioning through coral and orange hues in the center, with touches of blue and purple in the upper left corner. The effect creates a sense of flowing, undulating ribbons or fabric with soft, blurred edges that suggest motion and depth. Wave distortion patterns create subtle ripples and undulations across the surface, while a tilt-shift blur effect adds dimensional focus with a soft falloff. The overall atmosphere is modern and dynamic, with a glossy, liquid-like quality enhanced by fine film grain texture. The color space uses OKLCH for smooth perceptual transitions, and the blob element adds organic, amorphous shapes with golden highlights that create visual interest and depth. The swirl base layer provides foundational color mixing, while multiple wave distortions at different angles (237° and 314°) create complex, layered movement patterns.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-b="#f02b63" color-space="oklch" />
    <WaveDistortion :angle="237" edges="wrap" :frequency="1.4" :strength="0.2" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="314" edges="mirror" :frequency="10" :speed="0.3" wave-type="sawtooth">
        <Blob :center="{ x: 0.37, y: 0.65 }" :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>