Floating Glass 5

A sophisticated shader effect featuring a trapezoid-shaped glass element positioned in the upper-right portion of the composition. The glass shape exhibits strong refraction and fresnel effects, creating a luminous cyan-to-blue gradient that appears to bend light across its surface. The background is dominated by deep black (#000000) on the left side, transitioning into flowing cyan and blue tones on the right. A FlowingGradient component creates organic, wave-like distortions with colors ranging from very dark purple (#0a0015) through cyan to light gray, producing a liquid, ethereal quality. The glass element has a highlight intensity of 0.25 with white fresnel effects at 0.15 intensity, creating bright edge definition. A Tritone color grading overlay applies a dark navy-to-cyan-to-blue color mapping across the entire composition, enhancing the cool color palette. The Dither effect with blue noise pattern and 0.62 threshold adds subtle texture and grain throughout, preventing banding and creating a more organic, film-like appearance. The overall effect suggests light refracting through a transparent, curved surface with soft edge softness of 0.15, creating a dreamy, otherworldly atmosphere with strong depth perception and dimensional quality.

<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: 1 }" :radius="3" :softness="0.63" :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: 'trapezoidSDF', bottomWidth: 0.5, topWidth: 0.73, height: 0.43, rotation: 0 }" :thickness="1" />
    <Tritone color-a="#1a1c38" color-b="#31cfeb" color-c="#3d5dff" :visible="true" />
    <Dither color-mode="source" pattern="blueNoise" :pixel-size="2" :threshold="0.62" />
  </Shader>
</template>