Light Leaks 3

A dynamic gradient shader effect featuring two overlapping blob shapes with warm orange and yellow tones positioned in the upper-left to center area of the composition. The primary blob displays a gradient from deep orange (#ff6a00) to bright yellow (#ffcc00) with soft, organic edges and a white highlight at approximately 60% intensity, creating a luminous glow effect. A secondary smaller blob with red (#ff2200) to orange (#ff8800) gradient overlaps slightly, adding depth and warmth. The background consists of a dark swirl pattern transitioning from deep navy blue (#0a1628) in the corners to dark purple (#1a0a3d), creating a moody, contrasting atmosphere. The blobs have significant softness (3-3.5 blur radius) creating feathered edges that blend seamlessly into the dark background. A chromatic aberration effect with 0.55 strength introduces subtle color fringing with red offset of -1.5 and blue offset of 1.5, adding a slight iridescent quality. Fine film grain at 0.1 strength provides subtle texture throughout. The overall effect creates a warm focal point against cool, dark surroundings with smooth deformation (1.5-1.8) giving the blobs an organic, breathing quality. The composition uses oklch color space for smooth color transitions.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="40" color-a="#0a1628" color-b="#1a0a3d" color-space="oklch" :detail="2.5" :speed="0.5" />
    <Blob :center="{ x: 0.5, y: 0.2 }" color-a="#ff6a00" color-b="#ffcc00" color-space="oklch" :deformation="1.5" highlight-color="#ffffff" :highlight-intensity="0.6" :opacity="0.95" :size="0.6" :softness="3" :speed="0.8" />
    <Blob :center="{ x: 0.45, y: 0.15 }" color-a="#ff2200" color-b="#ff8800" color-space="oklch" :deformation="1.8" highlight-color="#ffffff" :highlight-intensity="0.7" :opacity="0.75" :softness="3.5" :speed="0.7" :visible="true" />
    <ChromaticAberration :angle="120" :blue-offset="1.5" :red-offset="-1.5" :strength="0.55" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>