Shaders
header.lightDarkMode D
Gallery

Radial Overlap 8

Radial Overlap

A dynamic abstract shader effect featuring flowing, organic wave-like patterns in vibrant pink and white tones. The composition displays layered, translucent curved ribbons that sweep diagonally across the canvas from upper left to lower right, creating a sense of fluid motion and depth. The primary effect is a swirl pattern that blends white (#ffffff) with hot pink (#ff6ee3), generating smooth gradients and soft transitions between colors. The waves have a feathered, fan-like quality with fine linear striations visible throughout, particularly concentrated on the right edge where they fan outward. The pixelation effect is subtly applied, creating a textured, slightly granular quality that varies in intensity across the composition - more pronounced in the darker pink areas and less visible in the bright white regions. The overall atmosphere is ethereal and contemporary, with a soft glow emanating from the white areas that gradually transitions into deeper magenta tones. The effect suggests movement and fluidity, with the swirling patterns creating a sense of wind or energy flowing through the composition. The background maintains a clean, minimalist aesthetic with transparent edges, allowing the dynamic foreground effects to be the focal point.

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="#ffffff" color-b="#ff6ee3" 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>