feat(registry): Apple Liquid Glass components — iOS 26 + macOS Tahoe

.oxlintrc.json

@@ -4,5 +4,11 @@
     "correctness": "error"
   },
   "plugins": ["react", "typescript"],
-  "ignorePatterns": ["dist/", "coverage/", "node_modules/", "playground/"]
+  "ignorePatterns": [
+    "dist/",
+    "coverage/",
+    "node_modules/",
+    "playground/",
+    "registry/blocks/**/lib/*.iife.js"
+  ]
 }

docs/catalog/blocks/ios26-liquid-glass.mdx

@@ -0,0 +1,50 @@
+---
+title: "iOS 26 Liquid Glass Home Screen"
+description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
+---
+
+# iOS 26 Liquid Glass Home Screen
+
+3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
+
+`liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`
+
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ios26-liquid-glass
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 15s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
+| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
+| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ios26-liquid-glass" data-composition-src="compositions/ios26-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/liquid-glass-context-menu.mdx

@@ -0,0 +1,48 @@
+---
+title: "Liquid Glass Context Menu"
+description: "Frosted glass context menu panel drifting over an aurora shader background"
+---
+
+# Liquid Glass Context Menu
+
+Frosted glass context menu panel drifting over an aurora shader background
+
+`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
+
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add liquid-glass-context-menu
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-context-menu" data-composition-src="compositions/liquid-glass-context-menu.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/liquid-glass-media-controls.mdx

@@ -0,0 +1,48 @@
+---
+title: "Liquid Glass Media Controls"
+description: "Frosted glass media control panels spreading over an aurora shader background"
+---
+
+# Liquid Glass Media Controls
+
+Frosted glass media control panels spreading over an aurora shader background
+
+`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
+
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add liquid-glass-media-controls
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-media-controls" data-composition-src="compositions/liquid-glass-media-controls.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/liquid-glass-notification.mdx

@@ -0,0 +1,48 @@
+---
+title: "Liquid Glass Notification"
+description: "Frosted glass notification cards floating over an aurora shader background"
+---
+
+# Liquid Glass Notification
+
+Frosted glass notification cards floating over an aurora shader background
+
+`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
+
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add liquid-glass-notification
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-notification" data-composition-src="compositions/liquid-glass-notification.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/liquid-glass-widgets.mdx

@@ -0,0 +1,48 @@
+---
+title: "Liquid Glass Widgets"
+description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
+---
+
+# Liquid Glass Widgets
+
+Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
+
+`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
+
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add liquid-glass-widgets
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-widgets" data-composition-src="compositions/liquid-glass-widgets.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/macos-tahoe-liquid-glass.mdx

@@ -0,0 +1,50 @@
+---
+title: "macOS Tahoe Liquid Glass Desktop"
+description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
+---
+
+# macOS Tahoe Liquid Glass Desktop
+
+3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
+
+`html-in-canvas` `3d` `macos` `tahoe` `gltf`
+
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add macos-tahoe-liquid-glass
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 15s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
+| `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
+| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="macos-tahoe-liquid-glass" data-composition-src="compositions/macos-tahoe-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/docs.json

@@ -129,9 +129,14 @@
           {
             "group": "HTML-in-Canvas",
             "pages": [
+              "catalog/blocks/ios26-liquid-glass",
+              "catalog/blocks/liquid-glass-context-menu",
+              "catalog/blocks/liquid-glass-media-controls",
+              "catalog/blocks/liquid-glass-notification",
+              "catalog/blocks/liquid-glass-widgets",
+              "catalog/blocks/macos-tahoe-liquid-glass",
               "catalog/blocks/vfx-iphone-device",
               "catalog/blocks/vfx-liquid-background",
-              "catalog/blocks/vfx-liquid-glass",
               "catalog/blocks/vfx-magnetic",
               "catalog/blocks/vfx-portal",
               "catalog/blocks/vfx-shatter",

docs/guides/html-in-canvas.mdx

@@ -109,7 +109,9 @@ Or install individually:
 
 | Block | Description | Install |
 |-------|-------------|---------|
-| [Liquid Glass](/catalog/blocks/vfx-liquid-glass) | Voronoi glass fracture with parallax reveal | `npx hyperframes add vfx-liquid-glass` |
+| [iOS 26 Liquid Glass Home Screen](/catalog/blocks/ios26-liquid-glass) | iPhone home screen with live Liquid Glass notifications and widgets | `npx hyperframes add ios26-liquid-glass` |
+| [macOS Tahoe Liquid Glass Desktop](/catalog/blocks/macos-tahoe-liquid-glass) | MacBook desktop with liquid glass windows, dock, and notifications | `npx hyperframes add macos-tahoe-liquid-glass` |
+| [Liquid Glass Notification](/catalog/blocks/liquid-glass-notification) | Native-feeling glass notification stack with progress and reply states | `npx hyperframes add liquid-glass-notification` |
 | [iPhone & MacBook](/catalog/blocks/vfx-iphone-device) | Real 3D GLTF devices with live HTML screens | `npx hyperframes add vfx-iphone-device` |
 | [Text Cursor](/catalog/blocks/vfx-text-cursor) | Dramatic text reveal with chromatic shadows | `npx hyperframes add vfx-text-cursor` |
 | [Portal](/catalog/blocks/vfx-portal) | Dimension breach with volumetric light | `npx hyperframes add vfx-portal` |