Kiwi 3

A smooth, gradient-based shader effect transitioning from warm yellow tones on the left to vibrant green hues on the right. The composition features layered chevron or arrow-like shapes pointing rightward, creating a sense of forward motion and depth. A prominent circular blob with soft edges appears in the lower-left quadrant, rendered in golden yellow (#fce656) with subtle blue highlights, suggesting a light source or glowing orb. The overall aesthetic is organic and fluid, with wave distortions creating subtle undulating patterns across the surface. The effect combines multiple layers: a swirl component establishing the base color palette, wave distortions adding rhythmic movement at different frequencies and angles, and a kaleidoscopic element centered in the lower-left creating subtle geometric patterns. Film grain adds fine texture throughout, preventing the gradient from appearing too flat. The edges are soft and transparent, with the entire composition maintaining high opacity and smooth blending. The color space uses OKLCH for perceptually uniform transitions, resulting in natural-looking gradients that feel cohesive despite the complex layering. The mood is energetic yet calming, suggesting growth, vitality, and forward momentum.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#3dd812" color-b="#2bf03b" color-space="oklch" />
    <WaveDistortion :angle="257" edges="wrap" :frequency="1.6" :strength="0.1" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="73" edges="mirror" :frequency="8.1" :speed="0.3" wave-type="sawtooth">
        <Blob :center="{ x: 0.32, y: 0.59 }" color-a="#fce656" color-b="#e9ac1e" :deformation="0.7" highlight-color="#03b2ff" :highlight-x="-0.5" :highlight-y="-0.9" :highlight-z="-0.1" :size="0.8" :softness="1" />
      </WaveDistortion>
    </WaveDistortion>
    <Kaleidoscope :center="{ x: 0.2, y: 0.67 }" :segments="17" />
    <FilmGrain :strength="0.4" />
  </Shader>
</template>