Shaders
header.lightDarkMode D
Gallery

Floating Glass 2

Floating Glass

A 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

vue
<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>