ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-12 07:09:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(registry): iOS 26 liquid glass home screen on 3D GLTF iPhone

Browse Source 
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.
This commit is contained in:
Miguel Ángel
2026-05-23 16:13:10 -04:00
parent 5b8fc0107c
commit d88df39613
4 changed files with 35 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
Vendored
+35 -53
View File
@@ -37,14 +37,6 @@
data-duration="15" data-duration="15"
data-root="true" data-root="true"
> >
<!-- 3D Theater — must be BEFORE layoutsubtree canvases to avoid WebGL context conflicts -->
<canvas
id="theater"
width="1920"
height="1080"
style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
></canvas>
<!-- LIVE HTML captured every frame via drawElementImage --> <!-- LIVE HTML captured every frame via drawElementImage -->
<canvas <canvas
id="cap-phone" id="cap-phone"
@@ -72,54 +64,37 @@
" "
> >
<div id="phone-scroll" style="background:#0a0a0f;color:#fff;transform:translateY(0)"> <div id="phone-scroll" style="background:#0a0a0f;color:#fff;transform:translateY(0)">
<!-- Hidden elements to keep original JS happy --> <div id="phone-title" style="display:none"></div><span id="phone-count" style="display:none"></span><div id="phone-cards" style="display:none"></div>
<div id="phone-title" style="display:none"></div> <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;font-size:14px;font-weight:700;"><span style="font-variant-numeric:tabular-nums;">15:16</span><div style="display:flex;gap:5px;align-items:center;font-size:11px;"><span>●●●●</span><span>📶</span><span style="color:#30d158;font-weight:600;">92%🔋</span></div></div>
<span id="phone-count" style="display:none"></span>
<div id="phone-cards" style="display:none"></div>
<!-- iOS 26 Status bar -->
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;font-size:14px;font-weight:700;">
<span style="font-variant-numeric:tabular-nums;">15:16</span>
<div style="display:flex;gap:5px;align-items:center;font-size:11px;">
<span>●●●●</span><span>📶</span><span style="color:#30d158;font-weight:600;">92%🔋</span>
</div>
</div>
<!-- App grid — iOS 26 liquid glass style -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;padding:10px 18px;"> <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;padding:10px 18px;">
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">☁</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Weather</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">☁</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Weather</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📈</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Stocks</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📈</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Stocks</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📡</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Find My</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📡</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Find My</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">🏠</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Home</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">🏠</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Home</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📖</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Books</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📖</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Books</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⭐</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">iTunes</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⭐</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">iTunes</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⊙</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Fitness</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⊙</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Fitness</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⏱</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Watch</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⏱</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Watch</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">👤</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Contacts</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">👤</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Contacts</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📁</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Files</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📁</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Files</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;">文A</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Translate</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;">文A</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Translate</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⚙</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Utilities</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⚙</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Utilities</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">〰</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Freeform</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">✦</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">ChatGPT</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📓</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Journal</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;">#</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Slack</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">💡</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Tips</div></div> <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📷</div><div style="position:absolute;top:-2px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">1</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Instagram</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">🔗</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">NSYS</div></div> <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;">𝕏</div><div style="position:absolute;top:-2px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">4</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">X</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⌨</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">SwiftKey</div></div> <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">✉</div><div style="position:absolute;top:-2px;right:0;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">797</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Proton</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">✦</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">ChatGPT</div></div> <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;">M</div><div style="position:absolute;top:-2px;right:-2px;background:#FF3B30;color:#fff;font-size:6px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">31.889</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Gmail</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;">#</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Slack</div></div> <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;">R</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Revolut</div></div>
<div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📷</div><div style="position:absolute;top:-1px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">1</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Instagram</div></div>
<div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;">𝕏</div><div style="position:absolute;top:-1px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">4</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">X</div></div>
<div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">✉</div><div style="position:absolute;top:-1px;right:0;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">797</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Proton</div></div>
<div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;">M</div><div style="position:absolute;top:-1px;right:-2px;background:#FF3B30;color:#fff;font-size:6px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">31.889</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Gmail</div></div>
<div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;">R</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Revolut</div></div>
</div> </div>
<!-- Search pill --> <div style="display:flex;justify-content:center;padding:6px 0 10px;"><div style="padding:7px 24px;border-radius:16px;background:rgba(120,120,130,0.25);font-size:12px;color:rgba(255,255,255,0.45);font-weight:500;">🔍 Search</div></div>
<div style="display:flex;justify-content:center;padding:6px 0 12px;"><div style="padding:7px 24px;border-radius:16px;background:rgba(120,120,130,0.25);font-size:12px;color:rgba(255,255,255,0.5);font-weight:500;">🔍 Search</div></div> <div style="margin:0 12px;padding:8px 12px;border-radius:24px;background:rgba(80,80,90,0.35);display:flex;justify-content:space-around;">
<!-- Dock --> <div style="position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">📞</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;">9+</div></div>
<div style="margin:0 12px;padding:8px 12px;border-radius:24px;background:rgba(80,80,90,0.4);display:flex;justify-content:space-around;"> <div><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🦁</div></div>
<div style="text-align:center;position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">📞</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;">9+</div></div> <div style="position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">💬</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">282</div></div>
<div style="text-align:center"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🦁</div></div> <div><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🎵</div></div>
<div style="text-align:center;position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">💬</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">282</div></div>
<div style="text-align:center"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🎵</div></div>
</div> </div>
</div>
</div> </div>
</canvas> </canvas>
@@ -240,6 +215,13 @@
</div> </div>
</div> </div>
</canvas> </canvas>
<canvas
id="theater"
width="1920"
height="1080"
style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
></canvas>
<div <div
id="driver" id="driver"
class="clip" class="clip"
registry/blocks/ios26-liquid-glass/models/hyperframes-desktop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 KiB

registry/blocks/ios26-liquid-glass/models/hyperframes-mobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

registry/blocks/ios26-liquid-glass/models/macbook.glb
BIN
View File
Binary file not shown.