Floating Glass

A dynamic shader effect featuring a prominent triangular glass element positioned in the center-right area of the composition. The background is dominated by deep dark-blue to black tones creating a night-like atmosphere. A flowing gradient with purple (#9000ff), white, and gray tones creates organic, wave-like patterns that move across the canvas with soft, blurred edges. The glass triangle element exhibits strong refraction properties with a high refraction value (0.86), creating a lens-like distortion effect that bends and refracts the underlying gradient patterns. The triangle has a subtle fresnel effect with white highlights along its edges, giving it dimensional depth and a glossy appearance. A tritone color mapping overlays the entire composition, mapping dark navy (#1a1c38) to shadows, vibrant purple (#9000ff) to midtones, and cyan (#e3ffff) to highlights, creating a cohesive color grading. The dither effect adds subtle blue noise texture with a threshold of 0.62, creating a grainy, slightly noisy quality that prevents banding. Soft edge transitions and a 0.15 edge softness on the glass create smooth, anti-aliased boundaries. The overall mood is ethereal and futuristic, with a sense of movement and energy flowing through the composition. The lighting angle of 276 degrees creates directional highlights on the glass surface.

<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: 1, 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.3" mask-source="idmnayde0qhf56tj00g" :seed="22" />
    <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: 'polygonSDF', radius: 0.55, sides: 3, rounding: 0, rotation: 0 }" :thickness="1" />
    <Tritone color-a="#1a1c38" color-b="#9000ff" color-c="#e3ffff" :visible="true" />
    <Dither color-mode="source" pattern="blueNoise" :pixel-size="2" :threshold="0.62" />
  </Shader>
</template>