Skip to content

Commit b8d521e

Browse files
miguel-heygenmiguel-heygen
authored
Merge pull request #1045 from heygen-com/feat/vfx-liquid-glass-v2
feat(registry): Apple Liquid Glass components — iOS 26 + macOS Tahoe
2 parents 7eb92ba + d97935b commit b8d521e

84 files changed

Lines changed: 11378 additions & 64 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.oxlintrc.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,11 @@
44
"correctness": "error"
55
},
66
"plugins": ["react", "typescript"],
7-
"ignorePatterns": ["dist/", "coverage/", "node_modules/", "playground/"]
7+
"ignorePatterns": [
8+
"dist/",
9+
"coverage/",
10+
"node_modules/",
11+
"playground/",
12+
"registry/blocks/**/lib/*.iife.js"
13+
]
814
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: "iOS 26 Liquid Glass Home Screen"
3+
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."
4+
---
5+
6+
# iOS 26 Liquid Glass Home Screen
7+
8+
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.
9+
10+
`liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`
11+
12+
<Warning>
13+
**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).
14+
</Warning>
15+
16+
<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 />
17+
18+
## Install
19+
20+
<CodeGroup>
21+
22+
```bash Terminal
23+
npx hyperframes add ios26-liquid-glass
24+
```
25+
26+
</CodeGroup>
27+
28+
## Details
29+
30+
| Property | Value |
31+
| --- | --- |
32+
| Type | Block |
33+
| Dimensions | 1920×1080 |
34+
| Duration | 15s |
35+
36+
## Files
37+
38+
| File | Target | Type |
39+
| --- | --- | --- |
40+
| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
41+
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
42+
| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
43+
44+
## Usage
45+
46+
After installing, add the block to your host composition:
47+
48+
```html
49+
<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>
50+
```

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "Liquid Glass Context Menu"
3+
description: "Frosted glass context menu panel drifting over an aurora shader background"
4+
---
5+
6+
# Liquid Glass Context Menu
7+
8+
Frosted glass context menu panel drifting over an aurora shader background
9+
10+
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
11+
12+
<Warning>
13+
**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).
14+
</Warning>
15+
16+
<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 />
17+
18+
## Install
19+
20+
<CodeGroup>
21+
22+
```bash Terminal
23+
npx hyperframes add liquid-glass-context-menu
24+
```
25+
26+
</CodeGroup>
27+
28+
## Details
29+
30+
| Property | Value |
31+
| --- | --- |
32+
| Type | Block |
33+
| Dimensions | 1920×1080 |
34+
| Duration | 8s |
35+
36+
## Files
37+
38+
| File | Target | Type |
39+
| --- | --- | --- |
40+
| `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
41+
42+
## Usage
43+
44+
After installing, add the block to your host composition:
45+
46+
```html
47+
<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>
48+
```

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "Liquid Glass Media Controls"
3+
description: "Frosted glass media control panels spreading over an aurora shader background"
4+
---
5+
6+
# Liquid Glass Media Controls
7+
8+
Frosted glass media control panels spreading over an aurora shader background
9+
10+
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
11+
12+
<Warning>
13+
**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).
14+
</Warning>
15+
16+
<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 />
17+
18+
## Install
19+
20+
<CodeGroup>
21+
22+
```bash Terminal
23+
npx hyperframes add liquid-glass-media-controls
24+
```
25+
26+
</CodeGroup>
27+
28+
## Details
29+
30+
| Property | Value |
31+
| --- | --- |
32+
| Type | Block |
33+
| Dimensions | 1920×1080 |
34+
| Duration | 8s |
35+
36+
## Files
37+
38+
| File | Target | Type |
39+
| --- | --- | --- |
40+
| `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
41+
42+
## Usage
43+
44+
After installing, add the block to your host composition:
45+
46+
```html
47+
<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>
48+
```

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "Liquid Glass Notification"
3+
description: "Frosted glass notification cards floating over an aurora shader background"
4+
---
5+
6+
# Liquid Glass Notification
7+
8+
Frosted glass notification cards floating over an aurora shader background
9+
10+
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
11+
12+
<Warning>
13+
**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).
14+
</Warning>
15+
16+
<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 />
17+
18+
## Install
19+
20+
<CodeGroup>
21+
22+
```bash Terminal
23+
npx hyperframes add liquid-glass-notification
24+
```
25+
26+
</CodeGroup>
27+
28+
## Details
29+
30+
| Property | Value |
31+
| --- | --- |
32+
| Type | Block |
33+
| Dimensions | 1920×1080 |
34+
| Duration | 8s |
35+
36+
## Files
37+
38+
| File | Target | Type |
39+
| --- | --- | --- |
40+
| `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
41+
42+
## Usage
43+
44+
After installing, add the block to your host composition:
45+
46+
```html
47+
<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>
48+
```

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "Liquid Glass Widgets"
3+
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
4+
---
5+
6+
# Liquid Glass Widgets
7+
8+
Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
9+
10+
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
11+
12+
<Warning>
13+
**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).
14+
</Warning>
15+
16+
<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 />
17+
18+
## Install
19+
20+
<CodeGroup>
21+
22+
```bash Terminal
23+
npx hyperframes add liquid-glass-widgets
24+
```
25+
26+
</CodeGroup>
27+
28+
## Details
29+
30+
| Property | Value |
31+
| --- | --- |
32+
| Type | Block |
33+
| Dimensions | 1920×1080 |
34+
| Duration | 8s |
35+
36+
## Files
37+
38+
| File | Target | Type |
39+
| --- | --- | --- |
40+
| `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
41+
42+
## Usage
43+
44+
After installing, add the block to your host composition:
45+
46+
```html
47+
<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>
48+
```

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: "macOS Tahoe Liquid Glass Desktop"
3+
description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
4+
---
5+
6+
# macOS Tahoe Liquid Glass Desktop
7+
8+
3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
9+
10+
`html-in-canvas` `3d` `macos` `tahoe` `gltf`
11+
12+
<Warning>
13+
**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).
14+
</Warning>
15+
16+
<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 />
17+
18+
## Install
19+
20+
<CodeGroup>
21+
22+
```bash Terminal
23+
npx hyperframes add macos-tahoe-liquid-glass
24+
```
25+
26+
</CodeGroup>
27+
28+
## Details
29+
30+
| Property | Value |
31+
| --- | --- |
32+
| Type | Block |
33+
| Dimensions | 1920×1080 |
34+
| Duration | 15s |
35+
36+
## Files
37+
38+
| File | Target | Type |
39+
| --- | --- | --- |
40+
| `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
41+
| `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
42+
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
43+
44+
## Usage
45+
46+
After installing, add the block to your host composition:
47+
48+
```html
49+
<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>
50+
```

‎docs/catalog/blocks/vfx-liquid-glass.mdx‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎docs/docs.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,9 +129,14 @@
129129
{
130130
"group": "HTML-in-Canvas",
131131
"pages": [
132+
"catalog/blocks/ios26-liquid-glass",
133+
"catalog/blocks/liquid-glass-context-menu",
134+
"catalog/blocks/liquid-glass-media-controls",
135+
"catalog/blocks/liquid-glass-notification",
136+
"catalog/blocks/liquid-glass-widgets",
137+
"catalog/blocks/macos-tahoe-liquid-glass",
132138
"catalog/blocks/vfx-iphone-device",
133139
"catalog/blocks/vfx-liquid-background",
134-
"catalog/blocks/vfx-liquid-glass",
135140
"catalog/blocks/vfx-magnetic",
136141
"catalog/blocks/vfx-portal",
137142
"catalog/blocks/vfx-shatter",

‎docs/guides/html-in-canvas.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,9 @@ Or install individually:
109109

110110
| Block | Description | Install |
111111
|-------|-------------|---------|
112-
| [Liquid Glass](/catalog/blocks/vfx-liquid-glass) | Voronoi glass fracture with parallax reveal | `npx hyperframes add vfx-liquid-glass` |
112+
| [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` |
113+
| [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` |
114+
| [Liquid Glass Notification](/catalog/blocks/liquid-glass-notification) | Native-feeling glass notification stack with progress and reply states | `npx hyperframes add liquid-glass-notification` |
113115
| [iPhone & MacBook](/catalog/blocks/vfx-iphone-device) | Real 3D GLTF devices with live HTML screens | `npx hyperframes add vfx-iphone-device` |
114116
| [Text Cursor](/catalog/blocks/vfx-text-cursor) | Dramatic text reveal with chromatic shadows | `npx hyperframes add vfx-text-cursor` |
115117
| [Portal](/catalog/blocks/vfx-portal) | Dimension breach with volumetric light | `npx hyperframes add vfx-portal` |

0 commit comments

Comments
 (0)