Shaders
header.lightDarkMode D
Gallery

A modern, glossy 3D letter 'G' rendered with sophisticated glass shader effects against a light gray background. The letter features a thick, rounded geometric form with a cutout center. The surface exhibits vibrant magenta and pink gradient coloring with dynamic swirling patterns that flow across the geometry. The glass material creates realistic light refraction and fresnel effects, particularly visible along the edges where bright blue-white highlights appear. The interior contains animated blob-like organic shapes in warm peachy-orange and golden tones that respond to cursor movement, creating a living, fluid quality. Subtle wave distortions ripple across the surface, and cursor interactions generate chromatic aberration ripples. The overall effect combines glossy transparency with thick material presence, creating depth and dimensionality. Fine film grain texture overlays the entire composition, adding subtle noise. The lighting angle creates pronounced specular highlights on the upper portions while maintaining soft shadows in recessed areas. The color palette transitions from cool blue-white fresnel highlights to warm magenta-pink base colors to peachy-orange accent blobs, creating visual interest and movement throughout the form.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
    tone-mapping="neutral"
  >
    <SolidColor color="#ffffff" />
    <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="#f0cce5" color-b="#ff4ffb" 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="#ff9b8f" color-b="#ffd1a3" :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 :bias="0" :strength="0.075" :visible="true" />
  </Shader>
</template>