Radial Overlap 10

A fluid, organic shader effect featuring smooth flowing gradients transitioning from cyan and turquoise tones to white. The composition displays layered, wave-like streaks that flow diagonally across the canvas, creating a sense of motion and depth. The top-left corner features darker cyan (#3afce8) that gradually lightens toward the center and right side, where pure white dominates. The effect has a soft, ethereal quality with no hard edges, suggesting transparency and luminosity. The swirl component creates subtle turbulence and organic movement throughout, while the pixelation layer adds fine texture variation that becomes more pronounced in the darker cyan areas and diminishes toward the white regions. The overall atmosphere is clean, modern, and calming, with a three-dimensional quality created by the layered gradient transitions. The effect appears to have gentle animation potential with the rotating conic gradient underneath, though currently the swirl effect is the primary visible component.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ConicGradient id="idmpiichpr7x5ibv89b" :center="{ x: 0, y: 0 }" color-a="#ffffff" color-b="#ffffff00" :repeat="3" :rotation="{ mode: 'loop', type: 'auto-animate', speed: 0.1, outputMax: 360, outputMin: 0 }" :visible="false" />
    <Swirl color-a="#ffffff" color-b="#3afce8" color-space="oklab" :detail="1.7" :visible="true" />
    <Pixelate :scale="{ type: 'map', curve: -0.65, source: 'idmpiichpr7x5ibv89b', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 93, outputMin: 1 }" />
  </Shader>
</template>