feat(registry): Apple Liquid Glass components — iOS 26 + macOS Tahoe#1045
Open
miguel-heygen wants to merge 14 commits into
Open
feat(registry): Apple Liquid Glass components — iOS 26 + macOS Tahoe#1045miguel-heygen wants to merge 14 commits into
miguel-heygen wants to merge 14 commits into
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 to feel like real Apple surfaces instead of a static mock: the iOS block had too much dead space, the notification behavior was not native enough, the old geometric
Liquid Glasscatalog entry was still visible, and the docs previews needed real uploaded video assets.What This Fixes
Liquid Glasscatalog entry so only the actual Liquid Glass blocks remain.Root Cause
The iOS composition was relying on DOM state that looked acceptable in still preview but did not render the notification interaction richly enough once the screen was captured to a Three.js device texture. The catalog also still had a legacy block whose visual language did not match the new Liquid Glass set, and the docs page was showing static/stale preview assets until the rendered videos were uploaded.
Verification
Local
bunx oxfmt --check registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html registry/blocks/ios26-liquid-glass/registry-item.json docs/catalog/blocks/ios26-liquid-glass.mdx docs/public/catalog-index.jsonHYPERFRAMES_BROWSER_PATH="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser" bunx tsx packages/cli/src/cli.ts lint /tmp/hf-liquid-glass-renders/projects/ios26-liquid-glasscomposition_file_too_largewarning.HYPERFRAMES_BROWSER_PATH="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser" PRODUCER_HEADLESS_SHELL_PATH="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser" PRODUCER_BROWSER_GPU_MODE=hardware bunx tsx packages/cli/src/cli.ts validate /tmp/hf-liquid-glass-renders/projects/ios26-liquid-glassHYPERFRAMES_BROWSER_PATH="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser" PRODUCER_HEADLESS_SHELL_PATH="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser" PRODUCER_BROWSER_GPU_MODE=hardware bunx tsx packages/cli/src/cli.ts render /tmp/hf-liquid-glass-renders/projects/ios26-liquid-glass --output /tmp/hf-liquid-glass-renders/videos/ios26-liquid-glass.mp4 --workers 1 --browser-gpuffprobe /tmp/hf-liquid-glass-renders/videos/ios26-liquid-glass.mp4Browser
http://localhost:3333/catalog/blocks/ios26-liquid-glassagent-browserverified the page video element is using the uploaded CDN MP4/poster, is not paused, hasreadyState: 4, and reports1920x1080video dimensions./tmp/hf-liquid-glass-renders/browser-shots/iphone-normal-screen/mintlify-ios26-final-reloaded.png/tmp/hf-liquid-glass-renders/records/ios26-docs-preview.webmCDN
s3://heygen-public/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4and.png.curl -I -L https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4returnsHTTP/2 200withcontent-type: video/mp4.curl -I -L https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.pngreturnsHTTP/2 200withcontent-type: image/png.Notes
SKIPPEDon the latest PR head, so the browser proof above is from local Mintlify running fromdocs/.