Radial Overlap

Open in editor

A dynamic abstract shader effect featuring layered, flowing organic shapes with smooth gradient transitions. The composition uses a swirl distortion effect that creates curved, wave-like formations flowing diagonally from lower-left to upper-right. The primary color palette transitions from a deep dark navy blue (#190f40) on the left side to a vibrant turquoise/cyan (#1dc4b4) on the right side, with intermediate teal tones creating smooth gradients between them. The effect has a three-dimensional appearance with overlapping curved planes that suggest depth and movement. Fine vertical striations or line patterns appear on the right side, creating a feathered texture that adds visual complexity. The pixelation effect is subtly applied with varying scale intensity, creating a granular quality that's more pronounced in certain areas. The overall mood is modern, fluid, and energetic, with a sense of motion and transformation. The lighting creates soft shadows and highlights that enhance the dimensional quality of the curved forms. The composition has a balanced asymmetry with the darker tones dominating the left and transitioning to lighter, more saturated cyan tones on the right.

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="#190f40" color-b="#1dc4b4" 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>