Floating Glass 7
Floating GlassA dramatic abstract shader effect featuring a crescent or curved moon-like shape with a glossy, glass-like appearance. The composition uses a dark navy-black background (#000000, #1a1c38) that dominates the lower and central portions of the image. A flowing gradient creates warm orange and golden tones (#e85d1a, #ffe4a8) that emanate from the curved edges, creating a luminous halo effect around the crescent form. The glass component produces a refractive, translucent quality with subtle highlights and fresnel effects along the curved edges, giving the shape dimensional depth and a liquid-like reflective surface. The flowing gradient with distortion (0.4) creates organic, undulating patterns within the warm color zones. A tritone color mapping transforms the underlying flowing gradient into the warm orange-to-gold palette, creating rich tonal separation between shadows and highlights. The dither effect with blue noise pattern (pixelSize: 2, threshold: 0.62) adds subtle texture and grain throughout, preventing banding and creating a film-like quality. The overall mood is warm, mysterious, and ethereal, with the crescent shape appearing to float or glow against the deep darkness. Light refraction (0.86) and edge softness (0.15) create smooth, glowing transitions at the boundaries.
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: 0 }" :radius="2.6" :softness="0.58" :visible="false" />
<SolidColor color="#000000" />
<FlowingGradient color-b="#9c9c9c" color-c="#a1a1a1" color-d="#d4d4d4" color-space="linear" :distortion="0.4" mask-source="idmnayde0qhf56tj00g" :seed="67" />
<Glass :aberration="0" :center="{ y: 0.5, type: 'mouse-position', reach: 0.05, originX: 0.654, originY: 0.49733570159857904, 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: 'crescentSDF', radius: 0.55, innerRatio: 0.8, offset: 0.2 }" :thickness="1" />
<Tritone color-a="#1a1c38" color-b="#e85d1a" color-c="#ffe4a8" :visible="true" />
<Dither color-mode="source" pattern="blueNoise" :pixel-size="2" :threshold="0.62" />
</Shader>
</template>