Shaders
header.lightDarkMode D
Gallery

A modern, glossy 3D letter 'G' rendered with sophisticated glass shader effects. The letter features a periwinkle-to-lavender blue gradient with semi-transparent glass material properties. The surface exhibits realistic light refraction and fresnel effects, creating bright highlights along the edges that transition from pale blue to white. The glass has a subtle thickness visible at the edges, giving it dimensional depth. Inside the glass form, there are animated swirl patterns in soft lavender and light blue tones that create organic movement. A warm peachy-orange blob with golden highlights moves responsively, likely following cursor interaction, adding dynamic warmth to the cool blue palette. Wave distortions ripple across the surface creating subtle undulation effects. The entire composition sits on a clean white background with a soft gray tone. Cursor ripples with chromatic aberration create interactive visual feedback. A fine film grain overlay adds subtle texture and photorealism. The lighting angle appears to come from the upper right, creating pronounced specular highlights and a luminous quality. The overall aesthetic is contemporary, polished, and interactive with a balance between cool blues and warm accent colors.

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="#c2d7ff" color-b="#abbaff" 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>