Light Leaks

A highly blurred, abstract gradient composition featuring multiple overlapping color zones with soft, organic transitions. The left side dominates with deep dark-blue and navy tones that gradually transition into bright cyan and light-blue in the upper-center area. A prominent magenta-to-pink gradient blob appears in the upper-right quadrant with soft, feathered edges and a bright white highlight core suggesting a glowing light source. The lower-right contains warm red and magenta tones blending into darker burgundy. A secondary cyan-blue blob with white highlight is positioned in the left-center area. The entire composition exhibits heavy motion blur and chromatic aberration effects, creating color fringing particularly visible at the edges where red and blue channels separate slightly. A subtle film grain texture overlays the entire image, adding a grainy quality. The swirling base layer creates organic, flowing patterns beneath the blob elements. The overall effect is ethereal and dreamlike with a sense of dynamic movement, enhanced by the soft focus and glowing highlights that create depth and luminosity throughout the composition.

<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="#4a7bb5" color-space="oklch" :detail="2.5" :speed="0.5" />
    <Blob :center="{ x: 0.3, y: 0.35 }" color-a="#00ffff" color-b="#0080ff" color-space="oklch" :deformation="1.5" highlight-color="#ffffff" :highlight-intensity="0.6" :size="0.6" :softness="3" :speed="0.8" />
    <Blob :center="{ x: 0.7, y: 0.65 }" color-a="#ff00ff" color-b="#ff0080" color-space="oklch" :deformation="1.8" highlight-color="#ffffff" :highlight-intensity="0.7" :softness="3.5" :speed="0.7" :visible="true" />
    <ChromaticAberration :angle="45" :blue-offset="1.5" :red-offset="-1.5" :strength="0.55" />
    <FilmGrain :strength="0.08" />
  </Shader>
</template>