Mercury 4

A geometric letter 'G' shape with a cutout center, rendered with a sophisticated glass shader effect against a pure black background. The shape features a luminous gradient that transitions from bright yellow-lime (#cbf723) in the lower-left quadrant through warm orange tones in the upper portions, creating a radiant, glowing appearance. The surface exhibits realistic glass refraction properties with subtle chromatic aberration visible at the edges. A dynamic swirl pattern animates across the surface, blending the yellow and orange colors with organic, flowing movements. Overlaid blob distortions with reddish-brown tones (#ed7551, #a75235) create localized highlights and depth variations, particularly visible as warm amber spots that respond to cursor interaction. The glass material demonstrates fresnel effects with a warm fresnelColor (#ffc382) creating rim lighting around the edges. Wave distortions at 23-degree angles add subtle undulating movement to the surface. Cursor ripples with chromatic splitting create interactive concentric distortion patterns when the mouse moves over the shape. A fine film grain texture (0.075 strength) adds subtle noise across the entire composition, enhancing the tactile quality. The overall effect is highly interactive and dynamic, with the shape appearing to be a translucent, glowing object with internal fluid-like motion and responsive surface deformations.

<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.04" fresnel-color="#ffc382" :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="#cbf723" color-b="#dd6526" 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="#ed7551" color-b="#a75235" :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>