The official VRIL LABS Web SDK — CrystalWindow Visor HUD, design tokens, and a future-forward component library for sovereign post‑quantum web experiences.
Install · Quick Start · API · Design Tokens · Browser Support · Live Docs →
The VRIL Web SDK ships the same components that power vril.li — a sovereign, post‑quantum technology brand — as a tiny, drop‑in static asset bundle.
Its flagship primitive is CrystalWindow — a glass Visor HUD that descends from the navigation bar to replace the disorienting modal pattern with a fluid, spatially‑grounded reveal that always keeps the user oriented.
| Component | What it is | Status |
|---|---|---|
| CrystalWindow | Glass Visor HUD — a modal replacement that descends from your nav bar with a fluid reveal animation. Includes idempotent bootstrap, programmatic API, template support, focus trap, ESC‑to‑close, and a four‑tier graceful‑degradation matrix down to IE9. | v1.0 stable |
| Design Tokens | A complete CSS custom‑property design system — colors, spacing, typography, motion, radii. Use them with or without the SDK's components. | v1.0 stable |
| Visor Reflect | Optional “reflection” layer that mirrors page content under the Visor for a true spatial‑HUD effect. | v1.0 stable |
<!-- in <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/VrilLabs/web-sdk@main/sdk/v1/vril.min.css">
<!-- before </body> -->
<script src="https://cdn.jsdelivr.net/gh/VrilLabs/web-sdk@main/sdk/v1/vril.min.js" defer></script>npm install @vrillabs/sdk
# or
yarn add @vrillabs/sdk
# or
pnpm add @vrillabs/sdkimport '@vrillabs/sdk/sdk/v1/vril.min.css';
import '@vrillabs/sdk/sdk/v1/vril.min.js';Copy sdk/v1/vril.min.css and sdk/v1/vril.min.js directly into your project — no build step required.
CrystalWindow auto‑bootstraps on DOMContentLoaded if the required DOM nodes are absent —
you can use it with zero markup.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/VrilLabs/web-sdk@main/sdk/v1/vril.min.css">
</head>
<body>
<nav class="nav">My site nav</nav>
<!-- The Visor reads its content from a <script type="text/html"> template -->
<script type="text/html" id="cwp-welcome">
<h3>Welcome to the Visor</h3>
<p>This panel descended from the navigation bar above.</p>
</script>
<button onclick="CrystalWindow.open('welcome')">Open Visor</button>
<script src="https://cdn.jsdelivr.net/gh/VrilLabs/web-sdk@main/sdk/v1/vril.min.js" defer></script>
</body>
</html>Need full control over the markup? Place the scaffold yourself:
<!-- 1. Overlay (placed before nav in DOM) -->
<div id="cw-overlay" aria-hidden="true"></div>
<!-- 2. Visor panel (anchored below nav via top: var(--cw-nav-h)) -->
<div id="crystalwindow" role="dialog" aria-modal="true" aria-labelledby="cw-title"
style="top: var(--cw-nav-h)">
<div class="cw-glass">
<div class="cw-handle" id="cw-handle"><div class="cw-handle-bar"></div></div>
<div class="cw-inner">
<div class="cw-header">
<h2 id="cw-title">Panel Title</h2>
<button class="cw-close" id="cw-close" aria-label="Close">×</button>
</div>
<div class="cw-body" id="cw-body"></div>
</div>
<div class="cw-reflect" aria-hidden="true"></div>
</div>
</div>
<!-- 3. Nav must be a sibling AFTER both #cw-overlay and #crystalwindow -->
<nav class="nav" id="nav">…</nav>All methods live on the global window.CrystalWindow object.
| Method | Signature | Description |
|---|---|---|
open |
open(idOrOptions) |
Open a panel by ID, or pass { id, title, badge, content, onOpen } for dynamic content. |
close |
close() |
Close the active panel and restore focus. |
isOpen |
isOpen() → boolean |
Whether a panel is currently visible. |
currentPanel |
currentPanel() → string | null |
The active panel ID, or null. |
register |
register(id, descriptor) |
Programmatically register a panel: { html, title, badge }. |
// Open by ID — content read from <script type="text/html" id="cwp-settings">
CrystalWindow.open('settings');
// Open with dynamic title + HTML content
CrystalWindow.open({
id: 'dynamic',
title: 'Hello world',
badge: 'Live',
content: '<p>Rendered on the fly.</p>',
onOpen: () => console.log('opened')
});
// Close
CrystalWindow.close();CrystalWindow dispatches two CustomEvents on window:
window.addEventListener('cw:open', e => console.log('opened:', e.detail.id));
window.addEventListener('cw:close', () => console.log('closed'));Override any of these in your own :root to theme the SDK. They cascade from the host page,
so your tokens always win.
| Token | Default | Purpose |
|---|---|---|
--cw-nav-h |
64px |
Height of your site nav bar — the Visor anchors below it. |
--cw-blur |
32px |
Backdrop‑filter blur depth. |
--cw-saturate |
200% |
Backdrop‑filter saturate amount. |
--cw-bg |
auto | Panel background (rgba). |
--cw-bdr |
auto | Panel border colour. |
--cw-glow |
auto | Panel glow corona. |
--t-crystal |
600ms |
Open animation duration. |
--t-slow |
400ms |
Close animation duration. |
--t-fast |
150ms |
Micro‑interaction duration. |
The SDK also ships a complete brand palette (--p, --a, --v, --g, …), spacing scale
(--s1 → --s16), and fluid type scale (--text-xs → --text-hero). See
sdk/v1/vril.css for the full reference.
CrystalWindow is built around a four‑tier graceful‑degradation matrix — the visual fidelity adapts to the browser, but the modal always works.
| Tier | Browsers | Experience |
|---|---|---|
| TIER 1 | Chrome 76+ · Safari 14+ · Firefox 103+ · Edge 79+ | Full glassmorphism, backdrop‑filter blur, modern transitions, spring easing. |
| TIER 2 | Chrome 49–75 · older Safari, Firefox | CSS custom props + transitions, no backdrop‑filter. |
| TIER 3 | IE 11 | Solid panel + CSS transitions only. |
| TIER 4 | IE 9 / 10 | JS class‑toggle reveal — modal still functional. |
All SDK code is ES5‑compatible and works without a transpiler.
sdk/v1/
├── vril.css — full stylesheet (24 KB) — tokens, components, CrystalWindow
├── vril.min.css — minified stylesheet (15 KB / 4 KB gz)
├── vril.js — full SDK (16 KB) — CrystalWindow engine, ES5
└── vril.min.js — minified SDK (6 KB / 2 KB gz)
Zero dependencies. No build step. No framework. Drop two files into a <head> and you're done.
| Resource | Link |
|---|---|
| Live SDK docs & demos | https://vril.li/web-sdk |
| Design system docs | https://vril.li/research |
| Brand & whitepapers | https://vril.li |
| Issue tracker | https://github.com/VrilLabs/web-sdk/issues |
Issues and pull requests are welcome. The SDK is intentionally small — please open an issue to discuss new components before submitting a PR.
MIT © 2026 VRIL LABS. Use it freely — sovereign code for a sovereign web.
