Liquid Glassifier

Product Introduction

1. Liquid Glassifier is a web component generator that enables developers to implement Apple’s Liquid Glass aesthetic in web interfaces through customizable, interactive buttons. It provides a script-based solution for embedding dynamically adaptive UI elements that mimic liquid-like material properties.
2. The core value lies in replacing static glassmorphism effects with responsive layers that adjust to environmental factors like background complexity and theme variations, ensuring consistent depth and usability across light/dark modes.

Main Features

1. The component integrates via a single script tag (<script type="module" crossorigin src="https://glass.danilofiumi.com/web-comps/boundle.js"></script>) and supports immediate deployment in HTML bodies using the <sv-liquid-glass> custom element with JSON-configurable styles.
2. Customization parameters include real-time adjustments to button geometry (roundness, padding), typography (font family, weight, size), and color (accent shades), all defined via a styles attribute accepting structured JSON data.
3. Automatic theme adaptation is enabled through the contrast attribute (light/dark), which dynamically adjusts distortion effects and material blur without requiring manual CSS overrides or media queries.

Problems Solved

1. Traditional glassmorphism fails to maintain visual coherence in layered UIs due to fixed blur values and opacity settings, whereas Liquid Glassifier implements environment-aware distortion and lighting calculations.
2. The product targets frontend developers and UI/UX designers seeking to implement Apple’s Liquid Glass design language in web apps without relying on complex CSS or JavaScript frameworks.
3. Typical use cases include landing-page CTAs, navigation menus, and interactive dashboards requiring buttons that adapt to dynamic backgrounds or theme switches without compromising responsiveness.

Unique Advantages

1. Unlike CSS-only glassmorphism generators, Liquid Glassifier uses WebGL-powered rendering for precise light refraction simulations and multi-layer depth stacking, achieving true liquid-like interactivity.
2. The component exposes CSS custom properties (e.g., --liquid-glass-accent) for seamless integration with existing design systems, allowing granular control over animations and hover states via predefined variables.
3. Competitive advantages include sub-10ms rendering performance optimized for 60fps interactions, cross-browser compatibility (Chrome, Safari, Firefox), and a 3KB gzipped bundle size with zero external dependencies.

Frequently Asked Questions (FAQ)

1. How do I embed the Liquid Glass button into my existing React/Angular/Vue project? The component is framework-agnostic; import the script in your root HTML file and use the <sv-liquid-glass> tag directly in JSX or templates without additional wrappers.
2. Can I animate the button’s liquid effect on hover or click? Yes, the component emits CSS custom properties like --liquid-distortion-intensity that can be transitioned via CSS or JavaScript to create custom animations tied to user interactions.
3. Does the dark/light mode adaptation work with system-level theme settings? While the contrast attribute must be manually toggled, developers can bind it to a media query observer using JavaScript to sync with OS-level preferences automatically.
4. What browsers are supported? The component works in all modern browsers supporting WebGL 2.0 and custom elements, including Chrome 79+, Safari 14.1+, and Firefox 78+, with fallbacks for unsupported browsers.
5. Is commercial usage allowed under the license? Yes, the component is free for personal and commercial use under the MIT license, with no attribution required unless modifying the core source code.