Vibrant Waves 6

A vibrant gradient shader effect displaying a smooth color transition from deep blue and purple tones in the upper left to hot pink and coral red in the lower right. The composition features vertical wave-like ridges or pleats that create a three-dimensional fabric-like appearance, with subtle undulating distortions running diagonally across the canvas. The effect combines multiple layered distortions: a base swirl component creates the foundational color gradient using oklch color space, while nested wave distortions at different frequencies (1.5 Hz sine wave and 15 Hz sawtooth) add the characteristic vertical ridge pattern and fine textural details. A tilt-shift blur effect is applied at a 155-degree angle, creating a selective focus that softens the overall image slightly while maintaining edge clarity. The blob component adds subtle organic highlights with a golden-yellow accent (#ffc61a) positioned in the upper-right quadrant, creating depth and luminosity. Film grain at 0.2 strength adds a subtle noise texture throughout. The overall mood is modern, energetic, and ethereal, with smooth color transitions and a sense of flowing movement. The vertical pleating effect suggests fabric, curtains, or liquid surfaces in motion.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#2d2ff7" color-b="#fc3845" color-space="oklch" />
    <WaveDistortion :angle="251" edges="wrap" :frequency="1.5" :strength="0.2" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="269" edges="mirror" :frequency="15" :speed="0.3" wave-type="sawtooth">
        <Blob :center="{ x: 0.51, y: 0 }" color-a="#ce84fe" color-b="#9f4dff" :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>