Sunlight Bars

A sophisticated gradient shader effect featuring diagonal striped patterns that transition smoothly across the canvas. The composition begins with a deep, saturated blue (#251eff) in the upper left corner and progressively transitions through purple and lavender tones toward the upper right, culminating in warm yellow (#ffc800) accents. The diagonal stripes create a sense of depth and movement, with each band appearing to have subtle transparency and soft edges. A glowing effect with a screen blend mode enhances the luminosity, particularly visible where the warmer tones meet the cooler blues. The lower portion maintains the blue-to-purple gradient with a wave distortion applied at a 121-degree angle, creating subtle undulating patterns that add organic movement to the geometric striping. A cyan-tinted highlight blob is positioned in the upper right area, contributing to the warm-to-cool color transition. The overall effect is smooth and atmospheric, with film grain texture subtly overlaid at 15% strength to add a slight grittiness and prevent banding. The composition evokes a sense of flowing energy and dimensional depth through the interplay of layered gradients, distortions, and glow effects.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Glow blend-mode="screen" :intensity="0.35" :size="22" :threshold="0.35">
      <Swirl :blend="37" :coarse-x="40" :coarse-y="40" color-a="#251eff" color-b="#0059ff" color-c="#00ff7f" color-space="oklch" :complexity="5.5" :fine-x="65" :fine-y="65" :medium-x="60" :medium-y="60" :scale="1" :speed="0.4" />
      <Blob :center="{ x: 0.84, y: 0.08 }" color-a="#ffc800" color-b="#c9840e" :deformation="0.8" highlight-color="#176bff" :highlight-intensity="0" :highlight-x="0.6" :highlight-y="-0.5" :highlight-z="0.8" :seed="42" :size="0.8" :softness="3" :speed="1.2" :visible="true" />
      <WaveDistortion :angle="121" edges="mirror" :frequency="8.9" :speed="1.5" :strength="0.25" :visible="true" wave-type="sawtooth" />
    </Glow>
    <FilmGrain :animated="0" :strength="0.15" />
  </Shader>
</template>