Vibrant Waves 7
Vibrant WavesA smooth, flowing gradient shader effect that transitions from deep red (#c41232) in the upper left corner through warm orange (#d4880a) in the center, to golden yellow and peachy tones toward the lower right. The composition features organic, curved wave-like striations that create a sense of depth and movement, resembling layered fabric or liquid surfaces. The waves appear to ripple horizontally across the canvas with varying frequencies - some subtle and broad, others more pronounced and detailed. A soft blob shape with highlights is positioned in the lower right area, adding dimensional depth with warm orange (#f5a623) and pink (#e8365d) tones. The overall effect has a polished, luminous quality with a slight film grain texture overlay that adds subtle noise without disrupting the smooth gradient. The tilt-shift effect creates a gentle focus blur that enhances the three-dimensional appearance. The color space uses oklch for the base swirl and linear for the blob, creating rich, vibrant hues that feel warm and energetic. The entire composition evokes a sense of flowing heat, warmth, and organic movement.
Code
<script setup lang="ts">
import {
Shader,
Blob,
FilmGrain,
Swirl,
TiltShift,
WaveDistortion
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl :blend="52" color-a="#d4880a" color-b="#c41232" color-space="oklch" />
<WaveDistortion :angle="182" edges="wrap" :frequency="1.5" :strength="0.15" :transform="{ scale: 1.3 }">
<WaveDistortion :angle="58" edges="mirror" :frequency="13" :speed="0.3" wave-type="sawtooth">
<Blob :center="{ x: 0.58, y: 0.92 }" color-a="#f5a623" color-b="#e8365d" :deformation="0.7" highlight-color="#ffc61a" :highlight-x="0.5" :size="0.8" :softness="1" />
</WaveDistortion>
</WaveDistortion>
<TiltShift :angle="175" :center="{ x: 0.45, y: 0.52 }" :intensity="90" :width="0.5" />
<FilmGrain :strength="0.2" />
</Shader>
</template>