v1.3.1
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
Holographic Glass
Creates a stunning 3D holographic glass effect using WebGL with multiple layered shaders. Features ray marching with SDF shapes, chromatic dispersion, refraction, fresnel reflections, swirl distortion, noise-based blur, normal mapping, and iridescent hologram coloring. Perfect for hero sections, premium backgrounds, or creating futuristic glass-like visual elements.
Holographic Glass
Interactive 3D glass with holographic effects.
Background
Base color behind the glass effect. This color shows through the refracted glass and influences the overall mood. Darker colors create more contrast with the holographic highlights.
Default: #810055 (Deep Magenta)
Glass Shape
Overall size of the 3D glass shape. Lower values create smaller, more compact forms. Higher values expand the glass to fill more of the container.
Default: 0.93
Initial rotation around the X axis. Affects the vertical tilt of the glass shape.
Default: 0.37
Initial rotation around the Y axis. Affects the horizontal turn of the glass shape.
Default: 0.42
Initial rotation around the Z axis. Affects the roll angle of the glass shape.
Default: 0.40
Height of the merged cylinder SDF shapes that form the glass structure. Higher values create taller, more elongated forms.
Default: 0.5
Smoothness of the glass edges during ray marching. Higher values create softer, more blended edges. Lower values produce sharper, more defined contours.
Default: 0.2
Optical Effects
Index of refraction for the glass material. Controls how much light bends when passing through. Higher values create stronger distortion effects.
Default: 0.5
Chromatic aberration amount. Separates RGB channels at different refraction angles to create rainbow prism effects. Higher values produce more colorful light separation.
Default: 0.25
Fresnel reflection intensity. Creates brighter reflections at grazing angles, mimicking real glass behavior. Higher values make edges glow more prominently.
Default: 0.5
Sharpness of specular highlights. Higher values create tighter, more focused light spots on the glass surface.
Default: 0.5
Brightness of specular highlights. Controls how bright the reflected light spots appear on the glass.
Default: 0.5
Animation
Base animation speed for the glass shape layer. Controls how fast the 3D form animates.
Default: 0.5
Rotation animation speed multiplier. Higher values make the glass shape rotate faster continuously.
Default: 1.0
Animation speed for the swirl distortion effect. Controls how fast the spiral pattern rotates.
Default: 0.6
Animation speed for the noise-based blur effect. Controls how fast the blur pattern evolves.
Default: 0.31
Animation speed for the holographic color shift effect. Lower values create subtle, slow color changes.
Default: 0.1
Swirl Effect
Maximum rotation angle of the swirl distortion. Higher values create more dramatic spiral twists in the image.
Default: 0.96
Size of the swirl effect area. Larger values extend the spiral distortion further from the center.
Default: 1.34
Distance offset added to the swirl calculation. Affects how the spiral pattern is positioned.
Default: 0.32
Base rotation offset for the animated swirl. Fine-tunes the starting angle of the spiral animation.
Default: 0.014
Overall intensity of the swirl effect. Lower values blend between original and swirled coordinates.
Default: 1.0
Blur & Noise
Intensity of the noise-driven directional blur. Higher values create stronger blur streaks following the noise pattern.
Default: 0.46
Scale of the 3D simplex noise used for blur direction. Lower values create larger, smoother noise patterns.
Default: 0.17
Rotation angle applied to the noise sampling coordinates. Tilts the direction of the blur streaks.
Default: 0.062
Time offset for the noise animation. Changes the starting point of the animated noise pattern.
Default: 0.51
Lighting
Exponential strength of the normal map calculation. Higher values create more dramatic surface relief and depth perception.
Default: 0.21
Linear multiplier for normal map intensity. Controls how pronounced the surface bumps and details appear.
Default: 1.0
Horizontal position of the light source. 0.0 is left edge, 0.5 is center, 1.0 is right edge.
Default: 0.5
Vertical position of the light source. 0.0 is top edge, 0.5 is center, 1.0 is bottom edge.
Default: 0.5
Hologram Effect
Overall strength of the holographic color overlay. Higher values make the iridescent rainbow effect more prominent.
Default: 0.5
Starting hue offset for the holographic color cycle. Shifts the base color of the rainbow effect.
Default: 0.0
Range of hue variation based on surface brightness. Higher values create more diverse color shifts across the surface.
Default: 0.5
Scale factor for the hologram's internal normal calculation. Affects how the iridescent colors respond to surface angle changes.
Default: 0.5
Performance
This element uses WebGL2 with multiple layered GLSL shaders through UnicornStudio.js. Features ray marching with signed distance functions (SDF), multi-step chromatic dispersion, 3D simplex noise generation, and real-time normal mapping. Very resource intensive due to 6 shader passes running at 60fps. Limit to 1 instance per page. Not recommended for mobile devices or low-end hardware due to high GPU requirements. Uses requestAnimationFrame for smooth animation and ResizeObserver for responsive scaling.