Shaders
header.lightDarkMode D
Gallery

A modern, glossy glass morphism effect featuring a large 'G' letterform shape with a cutout center against a pure black background. The glass surface displays a luminous, cloud-like texture with soft white and light blue tones that create a frosted, ethereal appearance. The glass has a subtle blue-tinted fresnel effect along its edges, creating a rim-light quality that enhances the three-dimensional depth. Within the glass shape, animated swirling patterns in light cyan and dark charcoal create organic, flowing motion that suggests liquid or gaseous movement. A blob-like element with semi-transparent blue-gray coloring and golden highlights adds dimensional depth and interactivity, responding to cursor position with smooth momentum. Wave distortions ripple across the surface at a moderate frequency, creating subtle undulations that enhance the fluid, dynamic quality. The overall effect combines refraction (0.82 intensity), chromatic aberration, and interactive cursor ripples that create a responsive, living quality. A fine film grain overlay adds subtle texture and photorealism. The lighting angle at 289 degrees creates highlights in the upper right, emphasizing the glass's glossy, reflective nature. The composition feels contemporary, premium, and interactive with a cool color temperature dominated by whites, light blues, and subtle cyan accents against the deep black void.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  CursorRipples,
  FilmGrain,
  Glass,
  SolidColor,
  Swirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0f0f0f" />
    <Glass :cutout="true" :fresnel="0.13" fresnel-color="#91b2ff" :fresnel-softness="0.48" :highlight="0.1" highlight-color="#dbe6ff" :highlight-softness="0.27" :light-angle="289" :refraction="0.82" :scale="1.1" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/5T7CT5qxxArz_sdf.bin" :thickness="0.37" :visible="true">
      <Swirl :blend="45" color-a="#ccf2ff" color-b="#191921" color-space="oklab" :detail="3.5" :speed="0.6" />
      <Blob blend-mode="linearDodge" :center="{ type: 'mouse-position', reach: 0.55, originX: 0.5, originY: 0.5, momentum: 0.3, smoothing: 0.3 }" color-a="#4e587891" color-b="#3b4b6b" :deformation="0.9" :size="0.15" :softness="0.7" />
      <WaveDistortion :angle="23" edges="mirror" :frequency="5.1" :speed="2.5" :strength="0.15" :visible="true" />
      <CursorRipples :chromatic-split="2" :decay="5" :intensity="20" :radius="0.7" :visible="true" />
    </Glass>
    <FilmGrain :strength="0.075" :visible="true" />
  </Shader>
</template>