Liquid Lenses 2
Liquid LensesA mesmerizing abstract shader effect featuring concentric swirling patterns with a dominant purple and lavender color palette. The composition consists of two nested circular/spiral forms that create a tunnel-like depth effect. The outer ring displays a soft, blurred transition between light gray (#a6a0bb) and vibrant purple (#7644f1), with smooth gradient blending. The inner circular form maintains similar color relationships but with enhanced saturation and contrast. The swirl effect creates organic, flowing motion lines that spiral inward, giving the impression of movement and depth. A subtle glass-like refraction effect is applied to a ring-shaped element positioned at the bottom-center, creating a glossy, crystalline quality with chromatic aberration visible at the edges. The overall atmosphere is ethereal and dreamlike, with soft focus areas transitioning to sharper details. Film grain texture is subtly applied throughout, adding a slight grittiness that prevents the image from appearing too smooth. The lighting suggests a soft, diffused light source with gentle highlights along the glass element's edges. The color space is linear, providing smooth gradations between the purple and gray tones. Cursor ripples with mirror edge behavior add interactive responsiveness to the effect, creating concentric wave patterns when engaged.
Code
<script setup lang="ts">
import {
Shader,
CursorRipples,
FilmGrain,
Glass,
Swirl
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl color-a="#a6a0bb" color-b="#7644f1" :detail="1.8" :speed="0.2" />
<CursorRipples :chromatic-split="0.3" :decay="1.4" edges="mirror" :intensity="9" :radius="1" />
<FilmGrain :strength="0.2" />
<Glass :aberration="0.28" :center="{ x: 0.5, y: 1 }" :edge-softness="0.05" :fresnel="0.03" :fresnel-softness="1" :highlight="0.15" :highlight-softness="0.29" :light-angle="276" :refraction="1.96" :shape="{ type: 'ringSDF', radius: 0.7, thickness: 0.3 }" shape-type="ringSDF" :thickness="1" />
</Shader>
</template>