GitHub radar
Apple Effect on React — Liquid Glass for the Web
Zero dependency React component implementing Apple’s Liquid Glass effect. A dynamic lens which refracts real DOM elements instead of static screenshots. Selectable text, clickable links, works on Chrome, Firefox, Safari (iOS too).
Zero dependency react component which implements apple’s awesome glass morphism effect. Rather than just showing an image of the screen, it serves as an interactive magnifying glass over DOM elements. It uses svg displacement filters and signed distance field rasterisation to create chromatic aberration and refraction effects whilst still allowing full interaction with the underlying elements. Works on chrome, firefox and safari (including ios). 3 modes available; refract children, refract content via props and render using webgl (video / canvas support).
Why a vibe-coder should care
If you want to give your landing page, portfolio or app some slick apple glass without compromising your ui then look no further! This is the perfect solution as it allows you to keep your ui intact, previously you would have been restricted to chrome or suffered from the content being frozen beneath. With this component you can have the best of both worlds so go ahead and use it in your next react project!
▌ More finds