Fractal Glass
Turn images & videos into cinematic 3D glass. Features volumetric masking, mobile gyro, parallax depth, and 60FPS performance. The ultimate distortion engine.
Make it with Workshop
Build your own component with AI
Turn images & videos into cinematic 3D glass. Features volumetric masking, mobile gyro, parallax depth, and 60FPS performance. The ultimate distortion engine.
Make it with Workshop
Build your own component with AI
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
