Sunrise 2

A smooth, flowing gradient shader effect that transitions diagonally from the lower-left to upper-right. The composition features a warm-to-cool color progression starting with bright yellow (#fad041) in the bottom-left corner, transitioning through orange and coral tones in the lower-middle section, then shifting to pink and magenta hues in the center, and finally resolving to blue (#4e7fd9) and dark-blue (#121bc9) tones in the upper-right. The gradient is extremely smooth and blended, with no hard edges or visible banding. A subtle film grain texture is applied across the entire surface at 0.3 strength, adding a slight noise pattern that prevents the gradient from appearing too synthetic. The progressive blur effect with 90-degree angle and 0.47 falloff creates a soft, diffused quality that enhances the dreamy atmosphere. The blob element positioned at the lower-left contributes warm yellow-orange tones with subtle highlight reflections, while the swirl component adds depth through its blue color palette. A gentle wave distortion with 4.2 frequency and 0.05 strength creates imperceptible undulations across the surface, maintaining visual continuity. The overall effect is a luminous, ethereal gradient with atmospheric depth and a soft, glowing quality.

<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: 0, 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>