Optical Physics

Apple-Style Liquid Glass Refraction

Physical optical refraction with chromatic dispersion and dynamic edge warping for cards, navigation, and floating action prompts.

✦ Drag element anywhere across the canvas to test real-time refraction

ABU BAKAR HASAN · 2026

PHYSICAL OPTICS ON THE WEB

Dynamic SVG displacement map bending live DOM content underneath with authentic chromatic aberration.

01GPU Shader

02sRGB Prism

03visionOS Style

Refracting Real DOM Content

Preset Element

Refraction Scale-112

Prism Fringe (Chroma)6px

Use Mobile, Tablet or Desktop to change the component preview width.

Component details

Built with

Next.js
React
TypeScript
Tailwind CSS
Hugeicons
Motion
SVG filters

Try it out

Drag the glass across the scene. Switch shapes and adjust refraction and prism fringe with the controls below.

Optical refraction works in Chromium. Other browsers use the existing frosted-glass fallback.

Design notes

Standard web glassmorphism relies solely on flat gaussian blur (backdrop-filter: blur), which looks like frosted plastic rather than real glass. Real optical glass has an index of refraction: light bends most aggressively near curved rims, separating slightly into red, green, and blue wavelengths (chromatic aberration). This component generates a live dynamic UV displacement map on an offscreen canvas and feeds it into an SVG feDisplacementMap filter pipeline in real-time, delivering authentic Apple visionOS-grade edge refraction with zero external 3D libraries.

Let’s build something similar