Simple Sunset

A smooth, flowing gradient shader that transitions diagonally from deep blue-navy in the lower left corner to warm coral-orange in the upper right corner. The gradient uses a 90-degree vertical angle with OKLCH color space interpolation, creating a perceptually smooth color transition through purple and pink midtones. Overlaid on this base gradient is a subtle sine wave pattern positioned at 35% vertical height, rendered in warm tan (#f4a261) with 56% opacity, creating gentle undulating horizontal waves with soft edges and low frequency. A fine simplex noise texture with reduced contrast (-0.6) and 15% opacity adds delicate organic variation and texture throughout, creating a slightly grainy, cloud-like quality. The entire composition is finished with a light film grain effect at full opacity with 20% strength, adding a subtle cinematic texture that enhances the atmospheric quality. The overall effect is soft, dreamy, and ethereal with warm-to-cool color harmony.

<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  LinearGradient,
  SimplexNoise,
  SineWave
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient :angle="90" color-a="#ff6b35" color-b="#004e89" color-space="oklch" :end="{ x: 0.5, y: 1 }" :start="{ x: 0.5, y: 0 }" :transform="{ edges: 'stretch' }" />
    <SineWave :amplitude="0.2" blend-mode="normal-oklch" color="#f4a261" :frequency="0.15" :opacity="0.56" :position="{ x: 0.5, y: 0.35 }" :softness="0.43" :speed="0.3" :thickness="0.4" :transform="{ edges: 'stretch' }" :visible="true" />
    <SimplexNoise :balance="0.3" color-b="transparent" :contrast="-0.6" :opacity="0.15" :scale="1.5" :seed="42" :speed="1.5" :transform="{ edges: 'stretch' }" />
    <FilmGrain :strength="0.2" :transform="{ edges: 'stretch' }" />
  </Shader>
</template>