Light Leaks 4

A dynamic, fluid shader composition featuring a warm-toned gradient background transitioning from dark navy blue in the upper left to warm tan and orange tones across the right side. Two prominent organic blob shapes with soft, deformable edges are positioned in the upper-center and upper-right areas, rendered in warm orange and golden-yellow hues with white highlights creating a glossy, three-dimensional appearance. The blobs have high softness values creating smooth, feathered edges that blend seamlessly into the background. A swirling base layer with dark navy and brown tones provides underlying texture and movement throughout the composition. Chromatic aberration effects introduce subtle color fringing with red and blue channel separation at approximately 30-degree angles, creating a slight iridescent quality. Fine film grain noise is applied uniformly across the entire surface, adding subtle texture and reducing smoothness. The overall effect suggests luminous, organic forms floating in a warm, atmospheric space with a dreamlike, ethereal quality. The color space uses OKLCH for perceptually uniform color transitions, and the blend modes create natural color mixing where elements overlap.

<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="#8b5e3c" color-space="oklch" :detail="1.8" :speed="0.5" />
    <Blob :center="{ x: 0.45, y: 0.28 }" color-a="#f2b544" color-b="#e06820" color-space="oklch" :deformation="1.5" highlight-color="#ffffff" :highlight-intensity="0.6" :opacity="0.75" :size="0.6" :softness="3" :speed="0.8" />
    <Blob :center="{ x: 0.75, y: 0.29 }" color-a="#ff9040" color-b="#c44020" color-space="oklch" :deformation="1.8" highlight-color="#ffffff" :highlight-intensity="0.7" :opacity="0.65" :softness="3.5" :speed="0.7" :visible="true" />
    <ChromaticAberration :angle="30" :blue-offset="1.5" :red-offset="-1.5" :strength="0.55" />
    <FilmGrain :strength="0.08" />
  </Shader>
</template>