v1.0.1
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
Frosted Glass
Creates realistic frosted glass effects with ray-traced refraction, dispersion, and interactive depth. Uses WebGL shaders for physically accurate light bending and frost blur effects. Features customizable fresnel reflections, specular highlights, and animated glass tiles that respond to mouse movement. Perfect for premium hero sections, modal overlays, or sophisticated UI elements requiring depth and realism.
Frosted Glass
Move your mouse to see the interactive glass refraction effect.
Appearance
Background color behind the glass effect. Works best with darker colors to show the frosted glass refraction clearly.
Default: #000000
Color of the glass shape element. Bright colors create stronger visual contrast with the refraction effect.
Default: #E6C100
Size of the visible glass shape. Larger sizes create more prominent effects but use more GPU resources.
Default: 536
Glass Effects
Light bending intensity through the glass. Higher values create stronger distortion. Controls the index of refraction for realistic glass behavior.
Default: 0.5
Color separation effect like a prism. Creates chromatic aberration at glass edges for realistic light dispersion through different wavelengths.
Default: 0.25
Frosted glass blur intensity. Higher creates stronger blur and more pronounced frost texture effect on the glass surface.
Default: 1.35
Edge glow intensity based on viewing angle. Creates realistic glass reflections that appear stronger at glancing angles.
Default: 0.5
Sharpness of light reflections. Higher creates tighter, more concentrated highlights on the glass surface.
Default: 0.5
Brightness of specular highlights. Controls how bright the light reflections appear on the glass.
Default: 0.5
Structure
Overall size of glass tiles. Smaller values create larger tiles with more pronounced depth effects.
Default: 0.24
Gap between glass tile elements. Controls the density and separation of the repeating glass pattern.
Default: 0.21
3D thickness of glass elements. Higher values create deeper, more dimensional glass boxes with stronger depth cues.
Default: 0.07
Animation
Animation speed of glass tile movement. Higher creates faster rotation and movement of the glass elements.
Default: 0.5
Performance
This element uses WebGL with custom GLSL shaders for ray marching and physically-based rendering. Implements 3D simplex noise for procedural textures, multi-step dispersion calculations with chromatic aberration, and real-time fresnel and specular lighting. Requires UnicornStudio library for shader compilation and rendering. Very resource intensive - limit to 1 instance per page. Not recommended for mobile devices or low-end hardware due to heavy GPU shader computations. Each frame calculates ray-traced refraction with up to 128 ray marching steps.