Shaders
header.lightDarkMode D
Gallery

Swirled Lenses 11

Swirled Lenses

A sophisticated shader effect featuring diagonal parallel lines that create a fluted glass appearance, reminiscent of corrugated or ribbed glass panels. The lines run at approximately 22 degrees from horizontal, creating a strong directional flow across the entire composition. The effect combines two layers: a swirl component that provides subtle color gradation and a fluted glass component that generates the linear ridge pattern with light refraction. The color palette transitions smoothly from a soft mint-cyan tone (#a8d8d0) on the left side to a muted slate-blue (#6b8eae) on the right side, creating a gentle gradient. The ridged lines have subtle highlights and shadows that simulate light interaction with glass surfaces, with white highlights appearing along the ridge peaks. The overall effect creates depth through the interplay of refraction (3.37 intensity) and chromatic aberration (0.3), giving the impression of looking through textured glass with a light source positioned at -90 degrees. The wave amplitude of 0.1 adds subtle undulation to the linear pattern, preventing it from appearing too rigid. The opacity is fully saturated at 1.0, and the blend mode is set to normal, allowing the layered effects to composite naturally. The atmosphere is cool, serene, and minimalist, evoking a sense of calm sophistication.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#a8d8d0" color-b="#6b8eae" color-space="oklab" :detail="2" />
    <FlutedGlass :aberration="0.3" :angle="22" :frequency="18" :highlight="2" :highlight-softness="0.11" :light-angle="-90" :refraction="3.37" shape="waves" :softness="1" :wave-amplitude="0.1" :wave-frequency="0.5" />
  </Shader>
</template>