Heatwave

A vibrant gradient shader effect displaying a smooth color transition across the image. The composition features a diagonal wave-like pattern flowing from the upper left to lower right. The left side is dominated by deep red tones that gradually transition through orange and yellow hues in the center, then shift to bright lime green and cyan in the upper right quadrant. The lower right corner transitions into blue and purple tones, creating a complete spectrum effect. The Swirl component generates warm red-orange color variations with a blend value of 25, creating subtle turbulence in the red region. The Blob component centered at coordinates (0.75, 0.25) produces the bright green-to-cyan gradient in the upper right, with a highlight at (0.3, -0.25) creating a bright yellow accent point. The WaveDistortion effect at 225 degrees with sine wave pattern adds subtle undulating movement to the color boundaries, creating soft, organic edges rather than hard transitions. A FilmGrain overlay with 0.5 strength adds fine texture throughout, while the ProgressiveBlur centered at (0.25, 0.75) with 45-degree angle creates a soft focus gradient emanating from the lower left. The overall effect is smooth, flowing, and atmospheric with a psychedelic quality. The colors blend seamlessly using oklch and oklab color spaces for perceptually uniform transitions.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FilmGrain :animated="0">
      <ProgressiveBlur :angle="45" :center="{ x: 0.25, y: 0.75 }" :falloff="0.65" :intensity="1500">
        <Swirl :blend="25" :coarse-x="50" :coarse-y="50" color-a="#e62d3b" color-b="#872f07" color-c="#f5a623" color-space="oklch" :complexity="5.5" :detail="0.75" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" :scale="4.5" :speed="0.5" />
        <Blob blend-mode="normal-oklch" :center="{ x: 0.75, y: 0.25 }" color-a="#7ed42d" color-b="#0891b2" color-space="oklab" :deformation="0.4" highlight-color="#fbbf24" :highlight-intensity="0.6" :highlight-y="-0.25" :seed="42" :size="0.75" :softness="0.65" :speed="0.8" />
        <WaveDistortion :angle="225" edges="mirror" :frequency="6" :speed="1.8" :strength="0.15" />
      </ProgressiveBlur>
    </FilmGrain>
  </Shader>
</template>