Swirls

A smooth, flowing gradient shader effect featuring soft, organic swirls and color transitions. The composition displays two primary swirl layers creating a fluid, wave-like pattern that moves diagonally across the canvas from upper-left to lower-right. The first swirl layer blends magenta (#e7149c) with light-green (#7ec55a) at 50% blend intensity, creating a smooth transition zone. A secondary swirl layer with higher detail (1.6) overlays the first, blending yellow-green (#b3ce53) with cyan (#97d6cb) using oklch color space and normal-oklab blend mode for enhanced color harmony. The overall effect is soft and diffused with no hard edges, creating an ethereal, atmospheric quality. A subtle film grain texture (0.4 strength) adds fine noise throughout, providing subtle texture without disrupting the smooth gradient flow. The blob mask underneath (invisible but used as a source) creates a soft vignette-like falloff toward the edges. The color transitions are smooth and natural, with the magenta-to-green gradient dominating the upper portion and the yellow-green-to-cyan gradient creating a cooler tone in the middle-lower section. The entire composition has a dreamy, pastel quality with soft focus and gentle color bleeding.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#e7149c" color-b="#7ec55a" />
    <Swirl blend-mode="normal-oklab" color-a="#b3ce53" color-b="#97d6cb" color-space="oklch" :detail="1.6" mask-source="idmld8md3zu0rcr8lsf" :speed="0.3" />
    <FilmGrain :strength="0.4" />
    <Blob id="idmld8md3zu0rcr8lsf" :size="0.9" :softness="2" :visible="false" />
  </Shader>
</template>