Fractal Glass

About this Component

The FractalGlass component is a high-performance React component that transforms standard images and videos into stunning, refracting glass masterpieces. Powered by a hybrid WebGL engine, it renders a cinematic distortion effect that combines fractal noise, volumetric height maps, and organic fluid motion, all optimized for a buttery-smooth 60FPS.

This component is deeply interactive and responsive. On desktop, it features a physics-based mouse parallax system that calculates depth in real-time; on mobile, it automatically switches to gyroscope control, allowing users to tilt their device to look "through" the glass. With advanced features like volumetric image masking (creating 3D glass logos), golden-angle cinematic blur, and a composite overlay system, FractalGlass is the ultimate tool for creating high-end, award-winning hero sections and visual assets.

Props include:

Content & Appearance

mediaType

image

video

imageScale

Physics & Flow

frequency

amplitude

speed

Pattern Customization

patternType

shardStyle

separation

pinch

Interaction (Parallax)

enableParallax

parallax

parallaxDirection

Warp & Curvature

enableWarp

warpType

bendAmount

bendCenterX

bendCenterY

Visual Effects

enableBlur

blur

enableAberration

aberration

Composite Overlays

enableOverlays

overlayImages