Mercury 5

A sophisticated glass morphism shader effect featuring a geometric 'G' logo shape with a cutout design. The composition uses a deep black background (#0f0f0f) that provides stark contrast. The central glass element displays a thick-walled geometric form with an orange gradient interior (#ff7a1a to #170308). The glass surface exhibits strong refraction (0.82) and chromatic aberration (0.5), creating a luminous, translucent quality with warm orange tones (#ffb380) concentrated at the fresnel edges. A dynamic swirl effect animates within the glass, blending orange and dark brown colors with high detail (3.5). An interactive blob element with yellow-gold highlights (#ffd633, #ffb614, #ffe11a) responds to mouse position, creating soft, deformable light spots that add dimensionality. Wave distortion at 23 degrees with sine waves (frequency 5.1, speed 2.5) creates subtle undulating surface movement. Cursor ripples with chromatic split (intensity 20) add interactive responsiveness. The overall effect conveys a premium, modern aesthetic with warm ambient lighting, glossy reflective surfaces, and fluid organic motion within a rigid geometric structure. Film grain (0.075 strength) adds subtle texture and cinematic quality.

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.04" fresnel-color="#ffb380" :fresnel-softness="0.48" :highlight="0.1" highlight-color="#dbe6ff" :highlight-softness="0.27" :light-angle="305" :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.23" :visible="true">
      <Swirl :blend="45" color-a="#ff7a1a" color-b="#170308" color-space="oklab" :detail="3.5" :speed="0.7" />
      <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="#ffd633" color-b="#ffb614" :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>