From 3224a5d5814b2ba9ea6e9ae0dfc0362cb9a88595 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Sat, 23 May 2026 19:34:00 -0400 Subject: [PATCH] feat(registry): polish Liquid Glass catalog blocks --- .oxlintrc.json | 8 +- docs/catalog/blocks/ios26-liquid-glass.mdx | 50 ++ .../blocks/liquid-glass-context-menu.mdx | 48 ++ .../blocks/liquid-glass-media-controls.mdx | 48 ++ .../blocks/liquid-glass-notification.mdx | 48 ++ docs/catalog/blocks/liquid-glass-widgets.mdx | 48 ++ .../blocks/macos-tahoe-liquid-glass.mdx | 50 ++ docs/docs.json | 6 + docs/public/catalog-index.json | 84 ++ .../ios26-liquid-glass/assets/icons/books.jpg | Bin 0 -> 24020 bytes .../ios26-liquid-glass/assets/icons/brave.jpg | Bin 0 -> 39431 bytes .../assets/icons/calendar.jpg | Bin 0 -> 17473 bytes .../assets/icons/chatgpt.jpg | Bin 0 -> 40501 bytes .../assets/icons/contacts.jpg | Bin 0 -> 24590 bytes .../ios26-liquid-glass/assets/icons/files.jpg | Bin 0 -> 22655 bytes .../assets/icons/find-my.jpg | Bin 0 -> 31466 bytes .../assets/icons/fitness.jpg | Bin 0 -> 51050 bytes .../ios26-liquid-glass/assets/icons/gmail.jpg | Bin 0 -> 17263 bytes .../ios26-liquid-glass/assets/icons/home.jpg | Bin 0 -> 26923 bytes .../assets/icons/instagram.jpg | Bin 0 -> 48559 bytes .../assets/icons/itunes-store.jpg | Bin 0 -> 23750 bytes .../assets/icons/messages.jpg | Bin 0 -> 21527 bytes .../ios26-liquid-glass/assets/icons/music.jpg | Bin 0 -> 24426 bytes .../assets/icons/notify-messages.jpg | Bin 0 -> 21527 bytes .../ios26-liquid-glass/assets/icons/phone.jpg | Bin 0 -> 21480 bytes .../assets/icons/photos.jpg | Bin 0 -> 34293 bytes .../assets/icons/proton-mail.jpg | Bin 0 -> 12684 bytes .../assets/icons/revolut.jpg | Bin 0 -> 13540 bytes .../ios26-liquid-glass/assets/icons/slack.jpg | Bin 0 -> 28240 bytes .../assets/icons/stocks.jpg | Bin 0 -> 32914 bytes .../assets/icons/translate.jpg | Bin 0 -> 25644 bytes .../ios26-liquid-glass/assets/icons/watch.jpg | Bin 0 -> 27317 bytes .../assets/icons/weather.jpg | Bin 0 -> 26183 bytes .../ios26-liquid-glass/assets/icons/x.jpg | Bin 0 -> 19401 bytes .../ios26-liquid-glass.html | 591 +++++++++----- .../ios26-liquid-glass/registry-item.json | 135 +++- .../liquid-glass-context-menu.html | 279 +++++-- .../registry-item.json | 2 +- .../liquid-glass-media-controls.html | 397 +++++---- .../registry-item.json | 2 +- .../assets/hyperframes-logo-dark.svg | 31 + .../liquid-glass-notification.html | 669 ++++++++++----- .../registry-item.json | 7 +- .../assets/hyperframes-logo-dark.svg | 31 + .../liquid-glass-widgets.html | 388 +++++---- .../liquid-glass-widgets/registry-item.json | 7 +- .../assets/icons/brave.jpg | Bin 0 -> 39431 bytes .../assets/icons/calendar.jpg | Bin 0 -> 17473 bytes .../assets/icons/dock-finder.png | Bin 0 -> 279917 bytes .../assets/icons/dock-mail.jpg | Bin 0 -> 23453 bytes .../assets/icons/dock-music.jpg | Bin 0 -> 24426 bytes .../assets/icons/dock-photos.jpg | Bin 0 -> 34293 bytes .../assets/icons/dock-safari.jpg | Bin 0 -> 45366 bytes .../assets/icons/files.jpg | Bin 0 -> 22655 bytes .../assets/icons/finder.png | Bin 0 -> 279917 bytes .../assets/icons/mail.jpg | Bin 0 -> 23453 bytes .../assets/icons/messages.jpg | Bin 0 -> 21527 bytes .../assets/icons/music.jpg | Bin 0 -> 24426 bytes .../assets/icons/photos.jpg | Bin 0 -> 34293 bytes .../assets/icons/safari.jpg | Bin 0 -> 45366 bytes .../assets/icons/slack.jpg | Bin 0 -> 28240 bytes .../assets/icons/toast-messages.jpg | Bin 0 -> 21527 bytes .../macos-tahoe-liquid-glass.html | 764 ++++++++++++++---- .../registry-item.json | 110 +++ registry/registry.json | 24 + 65 files changed, 2880 insertions(+), 947 deletions(-) create mode 100644 docs/catalog/blocks/ios26-liquid-glass.mdx create mode 100644 docs/catalog/blocks/liquid-glass-context-menu.mdx create mode 100644 docs/catalog/blocks/liquid-glass-media-controls.mdx create mode 100644 docs/catalog/blocks/liquid-glass-notification.mdx create mode 100644 docs/catalog/blocks/liquid-glass-widgets.mdx create mode 100644 docs/catalog/blocks/macos-tahoe-liquid-glass.mdx create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/books.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/brave.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/calendar.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/chatgpt.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/contacts.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/files.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/find-my.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/fitness.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/gmail.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/home.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/instagram.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/itunes-store.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/messages.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/music.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/notify-messages.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/phone.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/photos.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/proton-mail.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/revolut.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/slack.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/stocks.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/translate.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/watch.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/weather.jpg create mode 100644 registry/blocks/ios26-liquid-glass/assets/icons/x.jpg create mode 100644 registry/blocks/liquid-glass-notification/assets/hyperframes-logo-dark.svg create mode 100644 registry/blocks/liquid-glass-widgets/assets/hyperframes-logo-dark.svg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/brave.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/calendar.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/dock-finder.png create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/dock-mail.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/dock-music.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/dock-photos.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/dock-safari.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/files.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/finder.png create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/mail.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/messages.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/music.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/photos.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/safari.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/slack.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/assets/icons/toast-messages.jpg create mode 100644 registry/blocks/macos-tahoe-liquid-glass/registry-item.json diff --git a/.oxlintrc.json b/.oxlintrc.json index 3c14d747d..6536c6c1d 100644 --- a/.oxlintrc.json +++ b/.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" + ] } diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx new file mode 100644 index 000000000..c738ecdf0 --- /dev/null +++ b/docs/catalog/blocks/ios26-liquid-glass.mdx @@ -0,0 +1,50 @@ +--- +title: "iOS 26 Liquid Glass Home Screen" +description: "3D iPhone with pixel-perfect iOS 26 home screen featuring liquid glass app icons, status bar, dock, and search pill — rendered via WebGPU glass shaders on a layoutsubtree canvas mapped to a GLTF device model." +--- + +# iOS 26 Liquid Glass Home Screen + +3D iPhone with pixel-perfect iOS 26 home screen featuring liquid glass app icons, status bar, dock, and search pill — rendered via WebGPU glass shaders on a layoutsubtree canvas mapped to a GLTF device model. + +`liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `gltf` `html-in-canvas` + + +**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). + + +