Shaders
header.lightDarkMode D
Gallery

Swirled Lenses 5

Swirled Lenses

A dynamic shader effect featuring layered, undulating wave patterns that create a three-dimensional fluted glass appearance. The composition consists of diagonal curved ridges that flow from the upper left toward the lower right, creating a sense of movement and depth. The primary color palette transitions smoothly from dark forest green (#036219) in the upper left corner through medium green tones in the center, to bright mint/light-green (#78efa0) in the lower right area. Each ridge is defined by subtle shadow and highlight variations that simulate light refraction through ribbed glass, with bright white highlights (approximately #ffffff) running along the peaks of the waves. The effect has a glossy, reflective quality with soft diffusion, suggesting a smooth glass surface with perpendicular fluting. The wave pattern maintains consistent frequency and amplitude throughout, creating a rhythmic, organic texture. The overall mood is cool, refreshing, and modern, with a polished, premium aesthetic. The transparency and blending create seamless color gradients between the green tones, while the fluted glass effect adds tactile dimensionality through strategic light and shadow placement.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#036219" color-b="#78efa0" color-space="oklab" :detail="1.8" />
    <FlutedGlass :aberration="0.3" :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>