Shaders
header.lightDarkMode D
Gallery

Swirled Lenses 9

Swirled Lenses

A smooth gradient shader effect transitioning from warm orange tones at the top to lighter peachy-tan tones at the bottom. The primary visual element is a series of diagonal parallel lines running from upper-left to lower-right across the entire canvas, creating a subtle ribbed or fluted glass texture pattern. These lines are created by the FlutedGlass component with a 203-degree angle and wave-based shape, producing a consistent linear striping effect. The Swirl component underneath provides the warm color gradient using OKLab color space blending between #f79701 (vibrant orange) and #ffac4d (lighter peachy-orange). The FlutedGlass layer adds refraction and light interaction with 4 units of refraction strength, creating subtle highlights and depth perception along the diagonal ridges. The overall effect has a polished, glass-like appearance with soft, uniform lighting. The opacity is fully opaque (1.0), and the blend mode is normal, resulting in a clean, professional gradient with dimensional texture overlay. The wave amplitude is minimal (0.09), keeping the distortion subtle and elegant rather than dramatic.

Code

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

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