Shaders
header.lightDarkMode D
Gallery

Swirled Lenses 6

Swirled Lenses

A sophisticated shader effect featuring layered, undulating wave patterns that create a three-dimensional ribbed or fluted glass appearance. The composition uses a swirling gradient base transitioning from deep purple (#5c1472) on the left side to light lavender (#ceadd1) on the right side. Overlaid on this gradient is a FlutedGlass effect with vertical wave ridges that run diagonally across the canvas at approximately 141 degrees, creating a sense of depth and movement. The waves have a soft, organic quality with subtle highlights (approximately 97% intensity) that catch light along the ridge peaks, enhancing the glass-like, refractive quality. The effect creates parallel curved lines that flow from upper left to lower right, with the darker purple tones concentrated on the left creating stronger contrast against the lighter lavender areas. The overall atmosphere is smooth, elegant, and ethereal with a polished, translucent quality. The wave amplitude and frequency create a rhythmic visual pattern that suggests motion and fluidity, while the highlight color (#ffffff) adds subtle luminosity to the ridge surfaces. The edges use transparency, allowing the effect to blend seamlessly. The color space uses oklab for smooth, perceptually uniform color transitions.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#5c1472" color-b="#ceadd1" color-space="oklab" :detail="1.4" />
    <FlutedGlass :aberration="0.3" :angle="141" :highlight="0.97" :highlight-softness="0.11" :light-angle="-90" :refraction="4" shape="waves" :softness="1" :wave-amplitude="0.4" :wave-frequency="0.5" />
  </Shader>
</template>