samasante/liquid-glass — reverse-engineered prompt
Reverse engineered prompt
Build me a small React library and demo site for an Apple style liquid glass effect on the web. I want a reusable Glass component that I can wrap around buttons, cards, panels, or hero content so it looks like real glass with tint, frost, a soft bright edge, and crisp content on top.
The big thing is that it should feel live, not like a screenshot. Text under the lens should stay selectable, links should still work, and in Chrome or Edge the glass should actually bend the live page behind it. In Safari and Firefox it should still look like convincing glass, and there should also be a way to refract a copy of some content so the bending effect works there too.
Please make it headless and easy to style with normal CSS or inline styles, with simple controls for size, corner radius, center position, and how strong the optics feel. Add a few polished examples like a glass button, a floating notification over a photo, and video controls over media. Look up current browser quirks if you need to.
Want more depth? Deep Reverse