Floating Glass 2
Floating GlassA luminous, organic shader effect featuring a glowing lime-green to yellow-green gradient that radiates from a central focal point against a deep black background. The effect creates a smooth, flowing tunnel or vortex-like structure with soft, diffused edges that fade into darkness. The primary glow exhibits a bright, neon-like quality with highlights of near-white (#feffe3) at the brightest points, transitioning through vibrant lime-green (#a1eb31) in the mid-tones, and darkening to deep navy-purple (#1a1c38) in the shadows. The shape appears to be a ring or toroidal form with a glass-like refractive quality, creating subtle light bending and fresnel highlights along the edges. A fine dithering pattern with blue noise is subtly visible across the surface, adding texture and preventing banding. The overall atmosphere is ethereal and otherworldly, with a sense of depth created by the gradient falloff and the glass refraction effect. The lighting angle appears to come from the upper left, creating dimensional highlights and a three-dimensional appearance despite the abstract nature of the form.
Code
<script setup lang="ts">
import {
Shader,
Circle,
Dither,
FlowingGradient,
Glass,
SolidColor,
Tritone
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Circle id="idmnayde0qhf56tj00g" :center="{ x: 0, y: 0.5 }" :radius="3" :softness="0.67" :visible="false" />
<SolidColor color="#000000" />
<FlowingGradient color-b="#9c9c9c" color-c="#a1a1a1" color-d="#d4d4d4" color-space="linear" :distortion="0.2" mask-source="idmnayde0qhf56tj00g" :seed="30" />
<Glass :aberration="0" :center="{ y: 0.5, type: 'mouse-position', reach: 0.05, originX: 0.4382326420198377, originY: 0.49919871794871795, momentum: 0.1, smoothing: 0.7 }" :edge-softness="0.15" :fresnel="0.15" :fresnel-softness="1" :highlight="0.25" :highlight-softness="0.52" :light-angle="276" :refraction="0.86" :shape="{ type: 'ringSDF', radius: 0.69, thickness: 0.15 }" :thickness="1" />
<Tritone color-a="#1a1c38" color-b="#a1eb31" color-c="#feffe3" :visible="true" />
<Dither color-mode="source" pattern="blueNoise" :pixel-size="2" :threshold="0.62" />
</Shader>
</template>