feat(registry): rewrite liquid glass blocks with liquid-glass-html-in-canvas

Complete rewrite of all 4 liquid glass registry blocks using
jeantimex/liquid-glass-html-in-canvas for real WebGPU glass rendering.

Architecture: Three.js aurora shader (z:0) + empty glass panels in
layoutsubtree canvas (z:1) + CSS text overlay (z:2). Text is crisp
and never passes through the glass shader.

- Renders via Brave with WebGPU + drawElementImage flags
- Continuous motion throughout — panels sweep across the screen
- liquid-glass.iife.js bundle (25KB) replaces liquid-dom (88KB)
This commit is contained in:
Miguel Ángel
2026-05-23 15:10:10 -04:00
parent 3560678bb2
commit 77588b0759
12 changed files with 6188 additions and 0 deletions
@@ -0,0 +1,25 @@
{
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
"name": "liquid-glass-context-menu",
"type": "hyperframes:block",
"title": "Liquid Glass Context Menu",
"description": "Frosted glass context menu panel drifting over an aurora shader background",
"stability": "experimental",
"dimensions": {
"width": 1920,
"height": 1080
},
"duration": 8,
"tags": ["liquid-glass-html-in-canvas", "webgpu"],
"files": [
{
"path": "liquid-glass-context-menu.html",
"target": "compositions/liquid-glass-context-menu.html",
"type": "hyperframes:composition"
}
],
"preview": {
"video": "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"
}
}