Quantum

A vibrant, fluid gradient shader effect dominated by warm and cool color transitions. The image features a central bright yellow-orange core that radiates outward, surrounded by magenta and purple tones at the edges. The composition shows soft, organic blob-like shapes with smooth color gradients blending seamlessly across the canvas. The Swirl component creates subtle rotational distortions with magenta (#ff006e) and purple (#8338ec) interactions, while the Blob element positioned at coordinates (0.65, 0.35) generates a warm orange-to-yellow gradient (#fb5607 to #ffbe0b) with soft edges and a white highlight creating dimensional depth. Wave distortion at 54 degrees with sine wave patterns adds subtle undulating movement across the surface. The ChromaticAberration effect introduces slight color separation with red, green, and blue channel offsets, creating a barely perceptible prismatic quality. Film grain texture at 0.5 strength adds a subtle grainy quality throughout. The overall effect is smooth and dreamy with soft focus areas, particularly at the edges where magenta and pink tones fade into the composition. The color space uses OKLCH for perceptually uniform color transitions, resulting in natural-looking gradients that feel organic and fluid rather than harsh or digital.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="35" color-a="#ff006e" color-b="#8338ec" color-space="oklch" :detail="2.4" :speed="0.4" />
    <Blob :center="{ x: 0.65, y: 0.35 }" color-a="#fb5607" color-b="#ffbe0b" color-space="oklch" :deformation="0.75" highlight-color="#ffffff" :highlight-intensity="0.4" :highlight-z="0.5" :size="0.85" :softness="1.2" :speed="0.3" :visible="true" />
    <WaveDistortion :angle="54" edges="mirror" :frequency="2.2" :speed="0.8" :strength="0.25" :visible="true" />
    <FlowField :detail="1.8" :speed="0.6" :strength="0.1" />
    <ChromaticAberration :angle="91" :blue-offset="0.8" :green-offset="-2" :red-offset="1.9" :strength="0.25" />
    <FilmGrain />
  </Shader>
</template>