LiquidAccessories Library

LiquidAccessories Library is an open-source-style Liquid Glass UI design system and frontend component study built with standalone HTML, modern CSS, vanilla JavaScript, and inline SVG filters. It is for people who want to explore a glass UI that behaves like an optical material rather than ordinary blur-based glassmorphism.

The project sits on a black background under a thick white grid, so you can see exactly what the glass does. Major surfaces bend, compress, stretch, or shift the grid near their rounded edges using displacement maps, SVG filters, layered highlights, shadows, and pointer-responsive lighting. The library covers navigation, forms, overlays, data interfaces, AI components, developer tools, media controls, responsive application patterns, and production-oriented documentation.

Open any standalone .html demo straight in a browser. No framework or build step is required to start exploring.

• Browse the expanded library: liquid-glass-expanded-library/index.html (65 components)
• Browse the foundation kit: liquid-glass-premium-kit/index.html (11 components)
• Component reference: docs/COMPONENT_GUIDE.md
• Start here: docs/GETTING_STARTED.md
• Full documentation index: docs/README.md

• What is LiquidAccessories?
• Why the White Grid?
• Key Features
• Components
• See It in Action
• Built for Every Screen
• Getting Started
• How the Glass Works
• Design Tokens
• Accessibility
• Performance
• Browser Support
• Documentation
• Roadmap
• Contributing
• FAQ
• License

Hold a curved glass lens over graph paper. The lines below appear to bend, because the lens changes how you see the scene behind it. LiquidAccessories recreates that effect inside a web interface.

A normal glassmorphism card is often a transparent background plus blur:

background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);

That can look attractive, but the scene underneath goes soft, not refracted.

LiquidAccessories combines techniques such as:

• SVG filters
• CSS backdrop filtering
• displacement maps
• feTurbulence
• feDisplacementMap
• CSS masks
• layered pseudo-elements
• specular highlights
• edge reflections
• inner and outer shadows
• pointer-responsive lighting
• CSS custom properties

The result reads as an optical material, where the strongest distortion sits near the curved glass boundary and the center stays calm enough for readable content.

1. Optics before decoration.
2. Hierarchy before effects.
3. Interaction before animation.
4. Accessibility before visual novelty.
5. Performance before unnecessary complexity.
6. Consistency before one-off experimentation.

The canonical environment of LiquidAccessories is one thing:

Black background + thick white grid + transparent Liquid Glass.

The grid is a calibration surface. Put a clear lens in front of an empty black wall and subtle distortion is hard to notice. Put the same lens over graph paper and every bent line makes the effect obvious.

Technically, the grid lets you inspect edge displacement, magnification, compression, stretching, lens direction, distortion strength, and the transition from a refracted edge to a calmer center.

The simplest quality test in the whole project is one question:

Place the component over a visible grid intersection. Does the grid look physically affected by the glass?

If the answer is no, more blur is rarely the fix.

The repository ships 76 standalone demos: 11 foundation studies in the premium kit and 65 in the expanded library. Every component below links to its runnable demo and its reference documentation. You can also open a whole gallery at once:

• Expanded library gallery (65 components)
• Premium foundation gallery (11 components)
• Component Guide with a one-line description for each entry

• Responsive Top Navigation · docs
• App Side Navigation · docs
• Mega Navigation Menu · docs
• Breadcrumb Navigation · docs
• Tab Navigation · docs
• Floating Application Dock · docs
• Mobile Bottom Navigation · docs
• Navigation Rail · docs
• Breadcrumb + Command Header · docs
• Step Navigation / Progress Stepper · docs
• Pagination · docs
• Split View Layout · docs

• Command Palette · docs
• Context Menu · docs
• Dropdown Menu · docs
• Popover · docs
• Tooltip System · docs
• Modal Dialog · docs
• Confirmation Dialog · docs
• Side Sheet · docs
• Mobile Bottom Sheet · docs
• Notification Center · docs
• Toast Notification System · docs
• Spotlight Overlay · docs

• Search Bar · docs
• Floating Label Input · docs
• Password Field · docs
• Textarea / Prompt Composer · docs
• Select Menu · docs
• Combobox / Autocomplete · docs
• Multi-Select Tags · docs
• Checkbox System · docs
• Radio Button Group · docs
• Toggle Switch · docs
• Segmented Control · docs
• Range Slider · docs
• Date Picker · docs
• Date Range Picker · docs
• Time Picker · docs
• OTP / Verification Code Input · docs
• File Upload / Drop Zone · docs

• Scrollable Timeline · docs
• Data Table · docs
• Advanced Data Grid · docs
• Kanban Board · docs
• Tree View / File Explorer · docs
• File Manager · docs
• Inbox / Message List · docs
• Activity Feed · docs
• Changelog Component · docs
• Progress Dashboard · docs
• Skeleton Loading System · docs

• Case Study Section · docs
• FAQ Accordion · docs
• Footer · docs
• Hero Section · docs
• Cards System · docs
• Image Carousel · docs
• Media Gallery / Lightbox · docs
• Bento Grid · docs
• Pricing Table · docs
• Testimonial Carousel · docs
• Feature Comparison Matrix · docs
• Team / People Grid · docs

• Prompt / Command Popup · docs
• AI Chat · docs
• AI Model Selector · docs
• AI Prompt Suggestions · docs

• Terminal · docs
• Code Editor · docs
• API Request Builder · docs
• Log Viewer · docs
• Inspector Panel · docs
• Node / Workflow Editor · docs

• Audio Player · docs
• Video Player Controls · docs

Experimental studies. Two later mobile-dock refraction prototypes live at the repository root: liquid-glass-mobile-bottom-nav-v2.html and liquid-glass-mobile-bottom-nav-v3.html. They are standalone and unpolished, kept for reference alongside the stable Mobile Bottom Navigation demo.

Liquid Glass carries navigation, dashboard grouping, active controls, and floating tools. It does not turn every small object transparent.

A code-oriented layout keeps stable high-contrast editor and terminal content, while glass concentrates in the application chrome, inspector, and command surface.

Conversation content stays calm. The model selector, prompt composer, suggestions, tools, and command palette carry the stronger material behavior.

The same design system drives a marketing landing page as readily as a dense dashboard.

Responsive design here does not mean squeezing a desktop page into a smaller rectangle. LiquidAccessories favors structural transformation:

Desktop Sidebar
      down to
Tablet Navigation Rail
      down to
Mobile Bottom Navigation

Desktop Side Sheet
      down to
Mobile Bottom Sheet

You have three options.

Cloning makes a copy of a GitHub repository on your computer.

git clone <repository-url>
cd LiquidAccessories

Then open any standalone component .html file in your browser. You do not need to install a framework to inspect the demos.

Use GitHub's Code > Download ZIP option, extract the folder, and open a demo file.

Each demo keeps its HTML, CSS, JavaScript, and SVG filters together, so you can read the complete implementation in one file. Copy the component into your project, then extract shared tokens and effects as your integration grows.

For the full walkthrough, read docs/GETTING_STARTED.md.

Picture one glass component as several perceptual layers stacked together:

Layer 1 -> Transparent body
Layer 2 -> Very restrained blur
Layer 3 -> Refraction / displacement
Layer 4 -> Edge reflection
Layer 5 -> Specular highlight
Layer 6 -> Shadow / depth
Layer 7 -> Interaction response

A low-opacity fill gives the object density without turning it into a milky panel. Blur softens the scene a little, but it is not the defining effect. An SVG displacement map shifts backdrop pixels near the glass edge, and the straight white grid makes that shift easy to see. A narrow bright rim reads as a physical boundary. A soft specular reflection moves with the pointer or a shared virtual light. Inner and outer shadows separate the object from the background and suggest thickness. Hover, press, focus, drag, and selected states then change geometry, light, shadow, and optical strength.

For the deeper technical explanation, read docs/GLASS_SYSTEM.md.

Tokens are reusable variables. Instead of hardcoding a radius or a refraction value in every component, the library gives those values names.

:root {
  --background: #000;
  --foreground: #fff;

  --grid-size: 64px;

  --glass-fill: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.25);
  --glass-highlight: rgba(255,255,255,.60);

  --glass-radius: 24px;
  --glass-refraction: 18;

  --motion-spring: cubic-bezier(.22, 1, .36, 1);
}

This keeps the system easy to tune without making every component look different. A small starting example:

<section class="glass-card">
  <h2>Optical card</h2>
  <p>Keep text on a stable content layer.</p>
</section>

.glass-card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);

  /* A full LiquidAccessories component can use an SVG
     displacement filter here when the browser supports it. */
  backdrop-filter: url(#glass-refraction) blur(.5px);
}

HTML describes what exists. CSS describes layout, typography, material, and states. JavaScript adds behavior such as selection, pointer tracking, drag, scroll response, or focus management. SVG filters provide advanced optical distortion where supported.

A beautiful button is useless if someone cannot reach it with a keyboard or understand it with assistive technology. The documentation treats accessibility as part of the component architecture: semantic HTML, keyboard navigation, visible :focus-visible states, screen-reader labels and ARIA states, focus management for dialogs and overlays, sufficient text contrast, touch-friendly targets, reduced-motion support, accessible error and success states, and opaque fallbacks when transparency is not appropriate.

See docs/ACCESSIBILITY.md.

Optical effects get expensive fast. The costly parts are SVG filters, backdrop filtering, large filter regions, multiple transparent layers, pointer tracking, continuous animation, and mobile GPU limits. The recommended strategy scales the effect to the device:

Capable Desktop  -> richer optical effects
Standard Default -> balanced displacement + highlights
Mobile / Reduced -> lower optical complexity
Fallback         -> simple readable surface

A visual effect that causes input lag fails the design system. See docs/PERFORMANCE.md.

Advanced optical effects render differently across engines. The library uses progressive enhancement rather than promising identical output everywhere. Test current versions of Chrome, Edge, Safari, Firefox, Mobile Safari, and Chrome Android. When a browser cannot run the full displacement path, a component falls back through simpler transparent and blurred surfaces, and finally to an opaque accessible surface.

See docs/BROWSER_SUPPORT.md.

The documentation works as a design-system handbook, engineering guide, UI/UX reference, learning resource, AI context, implementation manual, and contribution standard.

You can hand an AI coding or design assistant this compact brief:

You are designing UI compatible with LiquidAccessories Library.

Use:
- black / near-black backgrounds
- visible white architectural grids
- optical Liquid Glass with edge displacement
- calm readable glass centers
- restrained grayscale UI
- strong hierarchy and typography
- shared selection lenses where related controls share one glass plane
- pointer-responsive specular lighting
- purposeful spring-like motion
- responsive structural transformations
- semantic HTML and keyboard accessibility
- reduced-motion and opaque fallbacks
- existing design tokens and component anatomy

Do not:
- create ordinary blur-only glassmorphism
- use excessive neon or cyberpunk glow
- place independent glass on every nested element
- sacrifice text readability for distortion
- shrink desktop layouts mechanically for mobile

The fuller machine-readable context lives in docs/AI_CONTEXT.md and docs/AI_GUIDELINES.md.

These are proposed future directions, not claims about features that already exist:

• reorganized reusable component packages
• React implementation
• Vue implementation
• Svelte implementation
• documentation website
• interactive playground
• automated visual refraction test suite
• formal performance presets
• expanded theming while preserving optical rules
• stronger cross-browser fallback layer

The basic workflow is fork, branch, build, test, document, and open a pull request. Fork creates your own copy of the repository on GitHub. A branch keeps your change isolated. A pull request asks the project to review and merge your work.

A new component should not be accepted unless it matches the design system, uses existing tokens, works responsively, includes keyboard interaction, supports reduced motion, has no obvious console errors, uses Liquid Glass on purpose, passes the grid refraction test, ships with documentation, performs reasonably, and includes a usable fallback.

See docs/CONTRIBUTING.md.

No. The project uses transparent and blurred surfaces, but its defining exploration is edge refraction, displacement, depth, and interaction rather than blur alone.

No. The demos are standalone HTML, CSS, JavaScript, and inline SVG.

Yes. The patterns translate to React. Preserve the semantic structure, CSS material layers, state model, accessibility, and fallbacks. See docs/FRAMEWORK_INTEGRATION.md.

The demos include responsive and mobile behavior, though advanced optical effects should be profiled and sometimes reduced on mobile GPUs.

They let the browser run image-processing operations such as displacement that plain CSS blur cannot provide on its own.

Straight grid lines make refraction easy to judge. The grid is part of the library's visual language and its optical QA process.

Yes. The black-grid environment is the canonical reference, but another theme still belongs to the system as long as it keeps the same optical, hierarchy, motion, accessibility, and responsive principles.

Treat the library as an experimental design-system laboratory with production-oriented rules. Validate individual patterns for your target browsers, devices, accessibility requirements, and performance budget before you ship.

No license file ships with this repository yet. Until one is added, do not assume any grant of rights. A license will be recorded here once the project chooses one.

LiquidAccessories Library draws on the broader evolution of optical interface design, material-based UI, responsive design systems, accessible frontend engineering, and work that moves past blur-only glassmorphism.

The project stays implementation-focused. The grid, components, source code, documentation, and visual QA rules exist to help people study the material, not merely look at screenshots.