A performance-first, content-aware Liquid Glass (Apple VisionOS/iOS inspired) UI design system specification, implementation guide, component templates, CLI scaffolder, and quality assurance suite for web applications.
Rega Liquid provides a complete engineering standard for creating translucent, refractive, and glassmorphic user interfaces without sacrificing rendering speed, battery life, readability, or accessibility.
- Content First: Primary reading content remains solid; glass is reserved for functional layers (navbars, toolbars, cards, modals, floating docks).
- Restrained Layering: 4 subtle optical layers: translucent fill, backdrop blur, specular inner rim, and drop elevation.
- Anti-Banding SVG Noise: Micro-grain procedural noise texture eliminates color banding on large backdrop blurs.
- Modern CSS Standards: Uses
@propertyanimatable specular angles, Container Queries (@container), and dynamic Light/Dark mode token switching. - Multi-Framework Ecosystem: Native components for React, Vue 3, Svelte 5, and Web Components (Custom Elements).
- IDE Autocomplete Snippets: Ready-to-use VS Code & Cursor code snippets (
assets/snippets/liquid-glass.code-snippets).
To prevent GPU thrashing and maintain 60 FPS across mobile and desktop devices, rendering intensity is categorized into three strict tiers:
| Tier | Technology | Recommended Usage | Constraints |
|---|---|---|---|
| Core (Default) | CSS backdrop-filter, noise, rim inset, transform motion |
General UI: Floating nav, cards, modals, inspectors |
|
| Enhanced | Core + SVG displacement/refraction maps | Focal points: Primary CTA, media controls |
|
| Showcase | WebGL / Canvas live snapshots | Hero sections, interactive demos | 1 surface maximum (requires explicit approval) |
Initialize Rega Liquid assets directly in any project:
# Scaffold core CSS and JS assets
node scripts/cli.mjs init --target ./my-app/public
# Copy Tailwind CSS plugin
node scripts/cli.mjs add-tailwind --target ./my-app/pluginsCopy assets/snippets/liquid-glass.code-snippets into your .vscode/ or editor snippets directory for instant autocomplete:
lg-surface— HTML Liquid Glass surface container.lg-card-react— ReactLiquidGlassCardcomponent.lg-card-vue— Vue 3LiquidGlassCardtemplate.lg-card-svelte— Svelte 5LiquidGlassCardcomponent.lg-webcomponent—<liquid-glass-card>Web Component.lg-modal-react— Accessible React glass modal.lg-dock-react— React floating glass dock toolbar.
.
├── SKILL.md # Primary AI agent instructions & operating contract
├── README.md # Project documentation & system overview
├── CONTRIBUTING.md # Open source contribution guidelines
├── SECURITY.md # Security disclosure policy
├── CODE_OF_CONDUCT.md # Community Code of Conduct
├── .github/ # CI/CD & GitHub Pages Workflows
│ └── workflows/
│ ├── audit.yml # Automated PR risk scanner
│ └── deploy-pages.yml # GitHub Pages live demo deployer
├── references/ # Architectural reference documentation
├── scripts/ # Automated QA, CLI & benchmark tooling
│ ├── cli.mjs # Project asset scaffolder CLI
│ ├── audit_liquid_glass.py # Static code audit scanner
│ └── benchmark_page.mjs # Puppeteer frame-rate benchmark tool
└── assets/ # Plugins, components, snippets & starters
├── snippets/ # VS Code & Cursor code snippets
├── plugins/ # Tailwind CSS plugin
├── components/ # React, Vue, Svelte & Web Component templates
└── starter/ # Starter template & live demo fixture
Run the static risk scanner on your codebase to catch performance issues:
python3 scripts/audit_liquid_glass.py /path/to/your/project --strict