Refractive Glass Nav

A floating refractive glass navigation bar featuring real-time optical displacement, chromatic dispersion, and fluid spring physics.

Built with a hybrid WebGL shader and hardware-accelerated SVG displacement engine, it physically bends, distorts, and refracts background content beneath it in real time—delivering the tactile depth of genuine optical glass while maintaining locked 60/120fps performance.

Highlights

• True Optical Refraction: Physically accurate ray distortion and chromatic dispersion that magnifies and refracts page elements passing beneath the bar.

• Motion-Triggered Refraction Indicator: A sleek, borderless dark-tinted active pill at rest that stretches with smooth spring physics and flares internal refraction exclusively while traveling across tabs.

• Prismatic Edge Highlights: Specular bevels and light-gathering rims that react seamlessly across light and dark backgrounds.

• Spring-Loaded Entrance: Refined opening sequence on page load, smoothly settling into position with organic easing.

• Responsive Glass Drawer: Seamless mobile handoff featuring an animated morphing toggle and a frosted refractive dropdown menu.

• Zero External Dependencies: Pure, self-contained React component with hardware-accelerated shaders and zero external runtimes.

Customizable in Framer

• Brand Identity: Upload a logo image or configure a typographic badge with custom link destinations.

• Navigation Items: Add, reorder, or edit links with custom labels, URLs, and target window controls.

• Call-to-Action: Toggle an accent CTA button with custom hover glow, press feedback, and independent styling.

• Refraction Controls: Fine-tune distortion scale, surface frost opacity, backdrop blur, saturation boost, and RGB dispersion channels directly from the Framer property panel.

• Geometry & Layout: Adjust bar padding, corner radius, elevation shadows, and mobile breakpoint thresholds.