Radial Overlap 12

A dynamic gradient shader effect featuring flowing, organic wave-like patterns that transition smoothly from cool blue tones on the left to warm magenta and pink tones on the right. The composition uses a Swirl shader as the primary effect, creating fluid, curved striations that flow diagonally across the canvas from upper-left to lower-right. The effect has a soft, blurred quality with layered translucent bands that overlap and create depth. The pixelation component adds subtle texture variation, with pixel density controlled by an invisible conic gradient mask that creates radial variation in the effect intensity. The overall aesthetic is modern and abstract, with a smooth gradient transition between cool and warm color families. The swirling motion creates a sense of movement and fluidity, while the color blend mode (oklab) ensures smooth, perceptually uniform color transitions. The effect has a polished, professional appearance typical of contemporary UI design backgrounds.

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: 1, y: 1 }" 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="#973471" color-b="#4aaefa" 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>