Liquid Glass Gallery

Transform standard media grids into an interactive, refractive 3D experience with real-time dispersion, fluid motion physics, and polished glass bevels.

Features

• Real-time WebGL refractive glass distortion physics

• High-performance HTML5 multi-video auto playback

• Interactive cursor trail deformations and jelly dynamics

• Dynamic chromatic dispersion and specular studio lighting

• Curved 3D spatial layout with depth displacement

• Responsive mobile-adaptive column and aspect ratio math

• Canvas-rendered dynamic typography labels with custom fonts

• Smart GPU memory management with force context cleanup

• Static renderer fallback support for Framer preview environments

• Smooth spring physics with automatic inertia glide damping

Customization Options

• Tile width and mobile viewport percentage

• Aspect ratio and grid gap spacing

• Spatial 3D curvature and depth bending

• Corner radius and glass thickness values

• Refractive index (IOR) and dispersion intensity

• Edge bevel size and studio reflection shine

• Touch hover radius, depth, and jelly squish

• Drag sensitivity, friction, and drift speed

• Max simultaneous video decoding limit

• Custom font family and typography styles

How to Use

• Drop the component onto your Framer canvas

• Upload MP4 videos or images in the Media property control

• Adjust grid layout, tile width, and 3D curvature settings

• Customize glass thickness, refractive index, and edge shine

• Set dynamic drag sensitivity and touch deformation feedback

• Publish your site for a responsive 3D interactive media gallery

Use Cases

• Modern portfolio media showcases

• Creative agency work grids

• Interactive video galleries

• High-fashion photography displays

• Product photography showcases

• Dark mode interactive sections

• WebGL landing page hero blocks

• Digital asset preview grids

• 3D motion design showcases

• Premium SaaS visual features