feat(registry): Apple Liquid Glass components — iOS 26 + macOS Tahoe#1045
Merged
Conversation
…-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)
miguel-heygen
force-pushed
the
feat/vfx-liquid-glass-v2
branch
from
0f0dbd6 to
77588b0
Compare
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| rel="stylesheet" | ||
| /> | ||
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| rel="stylesheet" | ||
| /> | ||
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| rel="stylesheet" | ||
| /> | ||
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| rel="stylesheet" | ||
| /> | ||
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
- 4 liquid glass component blocks with WebGPU glass via liquid-glass-html-in-canvas (25KB): notification, context menu, media controls, widgets - iOS 26 liquid glass home screen block (WIP): 3D iPhone with layoutsubtree canvas showing app grid with glass icons - All blocks use 3-layer architecture: Three.js shader (z:0), glass panels in layoutsubtree canvas (z:1), CSS text overlay (z:2) - Renders via Brave with WebGPU + drawElementImage flags
miguel-heygen
changed the title
Replaces the phone screen content in vfx-iphone-device with an iOS 26 home screen: glass app icons (Weather, Stocks, ChatGPT, Slack, X, etc.), status bar with battery/signal, search pill, dock with badges. All on a real GLTF iPhone model with camera choreography.
Adds WebGPU support to the Chrome launch args alongside the existing CanvasDrawElement flag. Use PRODUCER_HEADLESS_SHELL_PATH to point to Brave for full WebGPU + drawElementImage support. Also fixes flicker in liquid glass blocks by removing onpaint/requestPaint callbacks that conflicted with GSAP's deterministic onUpdate rendering. Adds macos-tahoe-liquid-glass block (WIP).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The Liquid Glass catalog refresh needed the Apple-inspired blocks to behave like coherent UI, not just pretty still frames. The iOS dock had the wrong 282-badge app, the context-menu pointer flow did not make sense, the media/context glass surfaces had heavy dark backing, the widgets preview still read as black cards instead of frosted glass, the macOS Tahoe block used a weak abstract desktop instead of a native Mac-feeling wallpaper/UI, and local Mintlify needed the refreshed CDN preview videos.
What this fixes
Liquid Glass Media Controlsby removing the dark backing slabs and letting the liquid-glass panels refract the shader background directly.Liquid Glass Context Menuinto a coherent interaction: click the file card, hoverNew Tab, reveal the submenu, then clickOpen in New Tab.Liquid Glass Widgetsso the stat cards, showcase panel, and pill chips are translucent frosted/liquid surfaces instead of opaque black boxes.282badge belongs to WhatsApp in both the grid and dock.macOS Tahoe Liquid Glass Desktoparound the Golden Gate wallpaper asset, native desktop widgets, a compact Finder window, the real dock icon assets, and a top-right Messages notification that matches the standalone Liquid Glass Notification right-in, overshoot, and settle motion.Root cause
The liquid-glass canvas renderer can keep glass surfaces visually present even when paired DOM text is faded with CSS opacity, so purely opacity-based exits could leave empty glass forms in the final frames. The context-menu pointer timeline also opened the submenu before the pointer had clearly selected the row, which made the interaction read as arbitrary. The widgets block had opaque content layers over the liquid-glass panels, which visually defeated the frosted-glass effect. The iOS dock reused the Messages icon where the referenced phone screen actually showed WhatsApp. The macOS Tahoe block relied on DOM-only glass captured through the 3D MacBook material, which washed out the UI; the final pass draws the native Mac glass UI directly into the captured desktop texture so it survives tone mapping.
Verification
Local checks
bunx oxfmt --check registry/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html registry/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html registry/blocks/ios26-liquid-glass/registry-item.jsonbunx oxfmt --check registry/blocks/liquid-glass-widgets/liquid-glass-widgets.html registry/blocks/liquid-glass-widgets/registry-item.json docs/catalog/blocks/liquid-glass-widgets.mdx docs/public/catalog-index.jsonbunx oxfmt --check registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html registry/blocks/macos-tahoe-liquid-glass/registry-item.jsongit diff --checkgit diff --cached --checkbunx tsx packages/cli/src/cli.ts lint /tmp/hf-liquid-glass-renders/projects/liquid-glass-context-menucomposition_file_too_largewarning.bunx tsx packages/cli/src/cli.ts validate /tmp/hf-liquid-glass-renders/projects/liquid-glass-context-menuSharefrom the intentionally bright glass surface.bunx tsx packages/cli/src/cli.ts lint /tmp/hf-liquid-glass-renders/projects/liquid-glass-media-controlscomposition_file_too_largewarning.bunx tsx packages/cli/src/cli.ts validate /tmp/hf-liquid-glass-renders/projects/liquid-glass-media-controlsbunx tsx packages/cli/src/cli.ts lint /tmp/hf-liquid-glass-renders/projects/ios26-liquid-glasscomposition_file_too_largewarning.bunx tsx packages/cli/src/cli.ts validate /tmp/hf-liquid-glass-renders/projects/ios26-liquid-glassbunx tsx packages/cli/src/cli.ts lint /tmp/hf-liquid-glass-renders/projects/liquid-glass-widgetscomposition_file_too_largewarning.bunx tsx packages/cli/src/cli.ts validate /tmp/hf-liquid-glass-renders/projects/liquid-glass-widgetsbunx tsx packages/cli/src/cli.ts lint /tmp/hf-liquid-glass-renders/projects/macos-tahoe-liquid-glasscomposition_file_too_largewarning.bunx tsx packages/cli/src/cli.ts validate /tmp/hf-liquid-glass-renders/projects/macos-tahoe-liquid-glassHigh-quality renders
All final renders used one worker and high quality with browser GPU:
liquid-glass-context-menu:--workers 1 --quality high --browser-gpu1920x1080,30fps,8.0s,240frames,5,702,860bytes.liquid-glass-media-controls:--workers 1 --quality high --browser-gpu1920x1080,30fps,8.0s,240frames,6,297,234bytes.ios26-liquid-glass:--workers 1 --quality high --browser-gpu1920x1080,30fps,15.0s,450frames,12,367,935bytes.liquid-glass-widgets:--workers 1 --quality high --browser-gpu1920x1080,30fps,8.0s,240frames,6,718,816bytes.macos-tahoe-liquid-glass:--workers 1 --quality high --browser-gpu1920x1080,30fps,15.0s,450frames,15,508,334bytes.Browser verification
Local Mintlify was verified with
agent-browserathttp://localhost:3333:http://localhost:3333/catalog/blocks/liquid-glass-context-menuhttps://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4,1920x1080; screenshot at/tmp/hf-liquid-glass-renders/browser-proof/context-menu-final-page.png; recording at/tmp/hf-liquid-glass-renders/browser-proof/context-menu-final-flow.webm.http://localhost:3333/catalog/blocks/liquid-glass-media-controlshttps://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4,readyState: 4,1920x1080; screenshot at/tmp/hf-liquid-glass-renders/browser-proof/media-controls-page.png.http://localhost:3333/catalog/blocks/ios26-liquid-glasshttps://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4,readyState: 4,1920x1080; screenshot at/tmp/hf-liquid-glass-renders/browser-proof/ios26-page.png.http://localhost:3333/catalog/blocks/liquid-glass-widgetshttps://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4,readyState: 4,1920x1080; screenshot at/tmp/hf-liquid-glass-renders/browser-proof/liquid-glass-widgets-video-page-latest.png; recording at/tmp/hf-liquid-glass-renders/browser-proof/liquid-glass-widgets-frosted-preview-latest.webm.http://localhost:3333/catalog/blocks/macos-tahoe-liquid-glasshttps://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4,readyState: 4,1920x1080,duration: 15, autoplaying; screenshot at/tmp/hf-liquid-glass-renders/browser-proof/macos-tahoe-notification-match-page.png; recording at/tmp/hf-liquid-glass-renders/browser-proof/macos-tahoe-notification-match-flow.webm.agent-browserfromfile:///tmp/hf-liquid-glass-renders/videos/macos-tahoe-liquid-glass.mp4; screenshot at/tmp/hf-liquid-glass-renders/browser-proof/macos-tahoe-notification-match-render-preview.png./tmp/hf-liquid-glass-renders/browser-proof/liquid-glass-docs-preview.webm.CDN
Uploaded with AWS CLI to
s3://heygen-public/hyperframes-oss/docs/images/catalog/blocks/and invalidated CloudFront distributionE2BSLVSZ7FG3U0.liquid-glass-context-menu.mp4:HTTP/2 200,content-type: video/mp4,content-length: 5702860,etag: "df985852ae294934a6ab674039ad534f".liquid-glass-media-controls.mp4:HTTP/2 200,content-type: video/mp4,content-length: 6297234,etag: "8178e45f47c0755e75def587e252c2d3".ios26-liquid-glass.mp4:HTTP/2 200,content-type: video/mp4,content-length: 12367935,etag: "baab125681755d8996777e377259f17e-2".liquid-glass-widgets.mp4:HTTP/2 200,content-type: video/mp4,content-length: 6718816,etag: "1b969b7464b342c1e6297cbfb8cba0a7".liquid-glass-widgets.png:HTTP/2 200,content-type: image/png,content-length: 1327407,etag: "abd2613887511eaa33ef76261c0317ba".macos-tahoe-liquid-glass.mp4:HTTP/2 200,content-type: video/mp4,content-length: 15508334,etag: "07d8a4cab5da41e40327d3ff8939114a-2".macos-tahoe-liquid-glass.png:HTTP/2 200,content-type: image/png,content-length: 913892,etag: "f0d485773cbe3bc18067c2a5cc0ef6a9".Notes
SKIPPED, so preview proof is from local Mintlify plus uploaded CDN assets./Users/miguel07code/Downloads/hyperframes-liquid-glass-renders/macos-tahoe-liquid-glass.mp4.