Shaders
header.lightDarkMode D
Gallery

Swirled Lenses 3

Swirled Lenses

A fluid, organic shader effect featuring smooth, undulating wave patterns that flow diagonally across the composition from upper-left to lower-right. The primary visual element is a series of parallel, curved ridges that create a three-dimensional appearance through subtle shadow and highlight variations. The effect combines two shader layers: a swirl component that provides the base magenta-to-purple color gradient, and a fluted glass component that adds fine linear striations and reflective highlights. The waves have a glossy, liquid-like quality with soft, diffused edges that fade to transparency at the boundaries. The lighting creates subtle specular highlights along the ridge peaks, particularly visible as white and light-pink reflections that enhance the dimensional quality. The overall mood is smooth, modern, and ethereal, with a sense of flowing motion despite the static nature of the image. The color transitions smoothly from bright magenta in the lower-left to deeper purple-magenta in the upper-right, creating depth and visual interest. The wave frequency is moderate, creating approximately 8-10 visible wave cycles across the composition.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#ff61ff" color-b="#ca10a3" color-space="oklab" :detail="1.8" />
    <FlutedGlass :aberration="0.3" :angle="94" :frequency="11" :highlight="0.97" :highlight-softness="0.11" :light-angle="-90" :refraction="4" shape="waves" :softness="1" :wave-amplitude="0.1" :wave-frequency="0.5" />
  </Shader>
</template>