Shaders
header.lightDarkMode D
Gallery

A modern, glossy geometric logo featuring a stylized 'G' shape composed of a thick curved ring with a rectangular cutout in the center. The design uses a glass morphism effect with significant refraction and chromatic aberration, creating a translucent, luminous appearance. The glass material exhibits a blue-to-white gradient with warm orange-brown tones visible through the transparent sections, suggesting a blurred background environment. The inner surface shows iridescent highlights with cyan and light-blue reflections along the curved edges, while the center rectangular cutout reveals an orange-peach solid color block. A dynamic swirl animation in deep blue and cyan tones flows within the glass material, creating organic movement. An orange-to-coral blob with warm highlights (yellow-orange) responds to cursor position, adding interactivity and depth. Wave distortions ripple across the surface at a sine wave frequency, creating subtle undulation effects. Cursor ripples with chromatic separation add interactive feedback with color splitting. The entire composition sits against a pure black background (#0f0f0f), making the luminous glass effect stand out dramatically. Fine film grain texture overlays the entire image, adding subtle noise and tactile quality. The lighting angle at 289 degrees creates directional highlights and fresnel effects, with soft edge transitions and a thickness parameter that gives the glass ring dimensional depth.

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="#30c9ff" color-b="#040733" 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="#ff8373" color-b="#ffa042" :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>