Floating Glass 6
Floating GlassA dynamic abstract shader effect featuring a prominent magenta/pink glowing form against a deep black background. The main visual element is a large, soft-edged triangular or organic shape with vibrant magenta coloring (#ff19fb) that dominates the left-center portion of the composition. The shape exhibits a glass-like refraction effect with subtle internal distortions and a fresnel highlight creating luminous edges. The magenta glow has a soft, diffused quality with smooth gradients transitioning from bright saturated pink at the core to darker purples at the periphery. The background is pure black (#000000) with minimal detail, creating stark contrast. A flowing gradient effect underlies the composition, blending dark purples (#0a0015) with lighter grays, creating atmospheric depth. The glass component adds crystalline refractions and light bending effects, particularly visible along the shape's edges where highlights appear in white (#ffffff). A tritone color mapping reinforces the magenta-to-purple-to-light-blue color progression. Fine dithering with blue noise pattern adds subtle texture and grain throughout, preventing banding and creating a slightly grainy, organic quality. The overall mood is ethereal, modern, and digitally surreal with a neon-like aesthetic.
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, y: 0 }" :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: 'polygonSDF', radius: 0.6, sides: 3, rounding: 0.35, rotation: 60 }" :thickness="1" />
<Tritone color-a="#1a1c38" color-b="#ff19fb" color-c="#dbe0ff" :visible="true" />
<Dither color-mode="source" pattern="blueNoise" :pixel-size="2" :threshold="0.62" />
</Shader>
</template>