Floating Glass 3
Floating GlassA dark, atmospheric shader effect featuring a prominent purple and magenta color scheme with glowing highlights. The composition shows a geometric hexagonal glass-like structure positioned centrally, with a bright white-to-pale cyan highlight creating a lens flare or refraction effect in the upper left quadrant. The background is predominantly deep black with purple gradients that flow and blend smoothly across the canvas. Multiple layers of purple glow create depth, with softer, more diffused purple halos surrounding sharper geometric elements. The glass component exhibits strong refraction properties with a 0.86 refraction value, creating distortion and light bending effects. A tritone color mapping applies dark navy-blue shadows, vibrant purple midtones, and pale cyan-white highlights, creating a sophisticated color grading effect. The overall mood is futuristic and ethereal, with a sense of depth created by the layered glowing effects and the glass refraction. Fine dithering with blue noise pattern adds subtle texture and grain throughout, particularly visible at the edges and in darker regions. The lighting angle of 276 degrees creates directional highlights that emphasize the glass geometry's three-dimensional quality.
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.5, y: 1 }" :radius="2.2" :softness="0.53" :visible="false" />
<SolidColor color="#000000" />
<FlowingGradient color-b="#9c9c9c" color-c="#a1a1a1" color-d="#d4d4d4" color-space="linear" mask-source="idmnayde0qhf56tj00g" :seed="49" />
<Glass :aberration="0" :center="{ y: 0.5, type: 'mouse-position', reach: 0.05, originX: 0.5, originY: 0.5, 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: 'polygonSDF', radius: 0.63, sides: 6, rounding: 0, rotation: 0 }" :thickness="1" />
<Tritone color-a="#1a1c38" color-b="#a131eb" color-c="#e3fff5" :visible="true" />
<Dither color-mode="source" pattern="blueNoise" :pixel-size="2" :threshold="0.62" />
</Shader>
</template>