Mercury 7

A large, bold letter 'G' rendered with a sophisticated glass shader effect against a pure black background. The letter features a translucent, frosted glass appearance with a purple-to-violet color gradient that shifts across the surface. The glass material exhibits strong refraction properties with visible chromatic aberration creating subtle color fringing at the edges. Internal to the glass shape, there's an animated swirl pattern with purple and deep indigo tones that creates organic, flowing movement. A blob-like highlight effect with magenta and pink hues moves responsively, suggesting interactive mouse-tracking capability. The surface shows realistic light reflection with bright highlights in pale blue-white tones, particularly visible on the upper curved portions of the letter. Wave distortion effects create subtle rippling across the glass surface, while cursor ripples add interactive responsiveness. The overall aesthetic is modern and premium, with a luminous quality enhanced by the glass material's fresnel effect and edge softness. Fine film grain texture adds subtle noise throughout. The letter maintains sharp geometric definition while the internal effects create dynamic, fluid movement within the constrained shape.

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="302" :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="#a78bfa" color-b="#1e1b4b" color-space="oklab" :detail="3.5" :speed="0.5" />
      <Blob blend-mode="screen" :center="{ type: 'mouse-position', reach: 0.55, originX: 0.5, originY: 0.5, momentum: 0.3, smoothing: 0.3 }" color-a="#f0abfc" color-b="#c084fc" :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>