Sunrise 3

A smooth, seamless gradient shader effect that transitions diagonally from the upper left to the lower right. The gradient begins with a rich blue (#4e7fd9) in the top-left corner, smoothly transitioning through purple and magenta tones in the center, then flowing into warm pink and coral hues before culminating in a golden-orange (#fad041) and burnt orange (#fa722a) in the bottom-right corner. The effect demonstrates a progressive blur applied at 90 degrees with a falloff of 0.47, creating a soft, diffused appearance throughout. Subtle wave distortion with a sine waveform (frequency 4.2, speed 3.4) adds gentle undulation to the color transitions without creating obvious ripples. A swirl effect with low blend intensity (5) and slow speed (0.3) contributes to the organic, flowing nature of the color transitions. The blob component centered at coordinates (1, 1) adds warmth and luminosity to the orange-yellow region with a highlight intensity of 0.35, creating a subtle glow effect. Film grain with 0.3 strength is applied as the outermost layer, adding fine texture and reducing banding artifacts. The overall mood is warm, energetic, and visually smooth, with no harsh edges or defined shapes-purely atmospheric and gradient-based.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FilmGrain :strength="0.3">
      <ProgressiveBlur :angle="90" :center="{ x: 0.5, y: 0.5 }" :falloff="0.47" :intensity="1000">
        <Swirl :blend="5" color-a="#4e7fd9" color-b="#121bc9" color-space="oklch" :detail="0.5" :speed="0.3" />
        <Blob blend-mode="normal-oklch" :center="{ x: 1, y: 1 }" color-a="#fad041" color-b="#fa722a" color-space="oklab" :deformation="0" highlight-color="#ffe01a" :highlight-intensity="0.35" :highlight-x="0.11" :highlight-y="-0.01" :highlight-z="0.13" :size="1.2" :softness="1" />
        <WaveDistortion :angle="360" edges="mirror" :frequency="4.2" :speed="3.4" :strength="0.05" />
      </ProgressiveBlur>
    </FilmGrain>
  </Shader>
</template>