What is QuickLiquid?
QuickLiquid is a UI effects library for developers building glass-like navigation bars, command palettes, cards, sheets and floating controls. It uses SVG displacement maps to refract background content through a curved bezel, with configurable rim lighting and chromatic dispersion. It provides a React component and a framework-free DOM engine, installed as an npm package without a separate stylesheet import.
The engine shares cached displacement maps between elements with matching geometry and exposes quality settings and profiling metrics. Its full refraction path depends on rendered SVG backdrop-filter support and is validated locally in Chromium. A CSS-only mode retains blur, saturation, tint, lighting and shadow, while Safari and Firefox rendering requires validation on the target browser versions.
Key capabilities
- Backdrop refraction SVG displacement maps bend background content around a configurable glass bezel.
- Material configuration Presets and explicit overrides control frost, tint, refraction, dispersion, lighting and appearance.
- Spring interactions Reusable utilities support press, drag, bounce, entry, exit and tab transitions.
- Droplet merging Grouped elements form metaball bridges as they move closer together.
- Rendering controls Shared map caching, quality tiers and live metrics support application-level performance profiling.
- Preference handling The engine and React wrapper respect reduced motion and reduced transparency by default.
Where QuickLiquid fits
QuickLiquid fits into the presentation layer of web applications that need refractive controls, animated tab indicators or glass-like panels. React applications can wrap content in its component, while vanilla JavaScript applications attach the engine to DOM elements. Its playground supports visual tuning and copying the resulting React configuration.
Before deployment, teams should test actual backdrop rendering across their target browsers and measure whole-page performance on representative hardware. Host styles such as isolation, filter, opacity and mask can interfere with Chromium refraction. Vanilla integration introduces a content wrapper that may affect direct-child layouts, and independently instantiated animation utilities require application-level handling of accessibility preferences.
Install
npm install quick-liquidReviews of QuickLiquid
Be the first to share your experience with QuickLiquid.
Write a review
Loading review form…
Alternatives to QuickLiquid
AstroAstro is an open-source, MIT-licensed framework for content-driven sites using islands architecture, shipping minimal JavaScript by default; its team joined Cloudflare in January 2026.
AstryxAstryx is an MIT-licensed design system from Meta for React 19 with 150+ components, seven themes, dark mode, page templates and a CLI. Agent docs and a hosted MCP server let AI coding tools use the same reference. Currently in Beta.
Next.jsNext.js is an open-source React framework maintained by Vercel for full-stack web applications. It adds file-based routing, Server Components, caching, image and font optimization, and deploys as a Node.js server, Docker image or static export.