obaidqatan/liquid-glass-component-library

This is a collection of over 70 React components built around a frosted glass and refractive glass visual style, inspired by the translucent surfaces seen in Apple's iOS design. The project started as a personal experiment to see how close a web browser could get to that look using only standard web technologies. There are two modes. The standard frosted glass mode creates the familiar blurred, semi-transparent surface effect and exposes sliders for blur strength, transparency, and color saturation. The experimental liquid glass mode uses a different technique, involving SVG filters, to create a refractive effect where light appears to bend through the surface, closer to how real glass looks. Both modes can be adjusted live in a demo playground. The component set covers the full range of things you would need to build an interface: buttons, cards, input fields, toggles, sliders, checkboxes, dropdowns, modals, drawers, tooltips, navigation bars, tab bars, tables, calendars, carousels, and more. There are also mobile-specific versions of many components such as action sheets, bottom tab bars, and notification drawers. Animations use a library called Framer Motion with spring-based physics. The demo app builds into a single HTML file that works as both the documentation and a live playground where you can see every component and tweak the glass settings. Setup requires running a package install and a dev server command. The README notes clearly that this is a personal sandbox project and contributions are not accepted at this time. It is labeled experimental, meaning the API and visual output may change. The license is MIT, so the components can be used freely in other projects.