Faking Apples Liquid Glass on the web

@github.awesome

54.5K followers · usually 8.7K views a post

Views

35.5K

Likes

1.4K

Comments

12

Shares

102

SoundTikTok sound · original sound - github.awesome

Promoted product

Liquid Glass

A headless React lens that refracts the live page — real refraction in Safari, Firefox, and Chrome. Zero dependencies.

2 videos2 creators

Why it worked

The video effectively showcases a unique and visually appealing effect (liquid glass refraction) that is often poorly replicated, clearly demonstrating its superior performance and cross-browser compatibility compared to existing solutions.

Summary

This video demonstrates Liquid Glass, a React lens that simulates real glass refraction on the web, allowing text and images to warp realistically across different browsers. It highlights that unlike other solutions, Liquid Glass handles the complex refraction math, offering true distortion without dependencies.

Structure

1Introduction to Liquid Glass and its difference from other solutions
2Demonstration of real DOM refraction and cross-browser compatibility
3Explanation of 'headless' nature and its benefits

Original caption

Faking Apple's Liquid Glass on the web usually means a flat blur that doesn't actually distort anything underneath. This React lens does the real thing. Genuine live DOM refraction so text and images warp through the glass as they would through real frosted glass, working across Safari, Firefox, and Chrome with zero dependencies. Headless means you bring your own styling, it just handles the hard refraction math. #github #opensource

More from @github.awesome

Product placement

Liquid Glass (ACTS - it refracts the DOM, making text and images warp as if through frosted glass, and it works across browsers. Removing it would change the video's topic and demonstration.)

Call to action

pnpm add @samasante/liquid-glass

On-screen text

Liquid glass Real glass refraction for the web. Works in Safari, Firefox and Chrome. Zero dependencies. pnpm add @samasante/liquid-glass Faking Apples Liquid Glass on THE WEB USUALLY MEANS Live demo + docs glass.samasante.com A FLAT BLUR THAT DOESN'T ACTUALLY DISTORT ANYTHING Genuine live DOM GENUINE LIVE DOM REFRACTION SO TEXT AND IMAGES WARP THROUGH THE GLASS AS THEY WOULD THROUGH REAL FROSTED GLASS WORKING ACROSS SAFARI FIREFOX FIREFOX AND CHROME WITH ZERO DEPENDENCIES HEADLESS MEANS YOU BRING YOUR OWN STYLING IT JUST HANDLES THE HARD REFRACTION MATH

Transcript

Faking Apples Liquid Glass on the web usually means a flat blur that doesn't actually distort anything underneath. This React lens does the real thing. Genuine live DOM refraction so text and images warp through the glass as they would through real frosted glass, working across Safari, Firefox, and Chrome with zero dependencies. Headless means you bring your own styling, it just handles the hard refraction math.