Swirled Lenses 9
Swirled LensesA 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
<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>