Shaders
header.lightDarkMode D
Gallery

Floating Glass 6

Floating Glass

A 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

vue
<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>