Shaders
header.lightDarkMode D
Gallery

A vibrant, flowing shader effect featuring concentric curved bands that radiate outward from the right side of the composition. The primary visual structure consists of 7-8 smooth, parallel curved stripes that create a sense of motion and depth. The color palette transitions smoothly between deep purple (#332778), magenta pink, coral orange, and warm cream/beige (#e1b995), creating a warm-to-cool gradient effect. The swirl component creates organic, flowing curves with soft edges that blend seamlessly. A blob element adds dimensional variation with highlights in yellow (#ffe11a) positioned in the upper-left quadrant, creating a subtle 3D lighting effect. The ConcentricSpin component with 7 rings and mirror edges reinforces the curved band structure, while the Dither effect with colorDodge blending adds a fine granular texture overlay that enhances visual complexity without overwhelming the smooth gradients. The overall atmosphere is energetic and modern, with smooth color transitions in OKLCH color space creating perceptually uniform gradients. The composition has a flowing, wave-like quality with soft, feathered edges that fade to transparency, giving it a dreamy, ethereal quality.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="70" color-a="#332778" color-b="#e1b995" color-space="oklch" :detail="0.8" />
    <Blob blend-mode="normal-oklch" :center="{ x: 0.45, y: 0.43 }" color-a="#ef2e44" color-b="#7535da" :deformation="0.2" :size="0.7" :softness="1" />
    <ConcentricSpin :center="{ x: 1, y: 1 }" :intensity="83" :rings="7" :smoothness="0.07" />
    <Dither blend-mode="colorDodge" color-mode="source" pattern="bayer8" :pixel-size="5" :threshold="0.48" />
  </Shader>
</template>