mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
feat(registry): iOS 26 liquid glass home screen block (WIP — 3D rendering)
This commit is contained in:
Miguel Ángel
+76
-70
@@ -37,6 +37,14 @@
|
||||
data-duration="15"
|
||||
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 -->
|
||||
<canvas
|
||||
id="cap-phone"
|
||||
@@ -53,59 +61,63 @@
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
<div id="phone-html" style="width:390px;height:844px;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:#fff;background:#0a0a0f;">
|
||||
<div id="phone-scroll" style="transform:translateY(0)">
|
||||
<!-- Status bar -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:14px 24px 8px;font-size:15px;font-weight:700;">
|
||||
<span>15:16</span>
|
||||
<div style="display:flex;gap:6px;align-items:center;">
|
||||
<span style="font-size:12px;">●●●●</span>
|
||||
<span style="font-size:14px;">📶</span>
|
||||
<span style="font-size:12px;color:#30d158;font-weight:600;font-variant-numeric:tabular-nums;">92%🔋</span>
|
||||
<div
|
||||
id="phone-html"
|
||||
style="
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
overflow: hidden;
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
color: #e2e8f0;
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<!-- 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 -->
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;padding:12px 20px;">
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">☁</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Weather</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">📈</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Stocks</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">📡</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Find My</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">🏠</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Home</div></div>
|
||||
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">📖</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Books</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">⭐</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">iTunes</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">⊙</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Fitness</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">⏱</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Watch</div></div>
|
||||
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">👤</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Contacts</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">📁</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Files</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">文A</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Translate</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">⚙</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Utilities</div></div>
|
||||
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">〰</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Freeform</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">📓</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Journal</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">💡</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Tips</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">🔗</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">NSYS</div></div>
|
||||
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">⌨</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">SwiftKey</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">✦</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">ChatGPT</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">#</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Slack</div></div>
|
||||
<div style="text-align:center;position:relative;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">📷</div><div style="position:absolute;top:-2px;right:2px;background:#FF3B30;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;font-variant-numeric:tabular-nums;">1</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Instagram</div></div>
|
||||
|
||||
<div style="text-align:center;position:relative;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">𝕏</div><div style="position:absolute;top:-2px;right:2px;background:#FF3B30;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;font-variant-numeric:tabular-nums;">4</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">X</div></div>
|
||||
<div style="text-align:center;position:relative;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">✉</div><div style="position:absolute;top:-2px;right:0;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:8px;font-variant-numeric:tabular-nums;">797</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Proton</div></div>
|
||||
<div style="text-align:center;position:relative;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">M</div><div style="position:absolute;top:-2px;right:-2px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:8px;font-variant-numeric:tabular-nums;">31.889</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Gmail</div></div>
|
||||
<div style="text-align:center;"><div class="liquid-glass" style="position:relative;width:72px;height:72px;margin:0 auto 4px;border-radius:18px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;--lg-blur:0.15;--lg-refraction:0.4;--lg-corner-radius:18;--lg-z-radius:12;">R</div><div style="font-size:10px;color:rgba(255,255,255,0.8);">Revolut</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="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: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: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: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: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: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: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: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: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: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: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: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: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: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: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"><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"><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"><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"><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;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>
|
||||
<!-- Search pill -->
|
||||
<div style="display:flex;justify-content:center;padding:8px 0 16px;">
|
||||
<div class="liquid-glass" style="position:relative;padding:8px 28px;border-radius:18px;background:rgba(120,120,130,0.3);font-size:14px;color:rgba(255,255,255,0.6);font-weight:500;--lg-blur:0.12;--lg-refraction:0.3;--lg-corner-radius:18;--lg-z-radius:10;">🔍 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>
|
||||
<!-- Dock -->
|
||||
<div class="liquid-glass" style="position:relative;margin:0 14px;padding:10px 14px;border-radius:28px;background:rgba(80,80,90,0.4);display:flex;justify-content:space-around;--lg-blur:0.18;--lg-refraction:0.4;--lg-corner-radius:28;--lg-z-radius:15;">
|
||||
<div style="text-align:center;position:relative;"><div style="width:56px;height:56px;border-radius:14px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📞</div><div style="position:absolute;top:-4px;right:-4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:8px;">9+</div></div>
|
||||
<div style="text-align:center;"><div style="width:56px;height:56px;border-radius:14px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">🦁</div></div>
|
||||
<div style="text-align:center;position:relative;"><div style="width:56px;height:56px;border-radius:14px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">💬</div><div style="position:absolute;top:-4px;right:-4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:8px;font-variant-numeric:tabular-nums;">282</div></div>
|
||||
<div style="text-align:center;"><div style="width:56px;height:56px;border-radius:14px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">🎵</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 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="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 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>
|
||||
@@ -228,13 +240,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</canvas>
|
||||
|
||||
<canvas
|
||||
id="theater"
|
||||
width="1920"
|
||||
height="1080"
|
||||
style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
|
||||
></canvas>
|
||||
<div
|
||||
id="driver"
|
||||
class="clip"
|
||||
@@ -430,11 +435,11 @@
|
||||
"</div></div></div>"
|
||||
);
|
||||
}
|
||||
var phoneCardsEl = document.getElementById("phone-cards");
|
||||
var laptopCardsEl = document.getElementById("laptop-cards");
|
||||
if (laptopCardsEl) {
|
||||
for (var ci = 0; ci < cardData.length; ci++) {
|
||||
laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
|
||||
}
|
||||
for (var ci = 0; ci < cardData.length; ci++) {
|
||||
if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
|
||||
laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
|
||||
}
|
||||
|
||||
var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
|
||||
@@ -651,23 +656,24 @@
|
||||
function render() {
|
||||
var d = S.drift;
|
||||
|
||||
// ── Animate live HTML content ──
|
||||
var ptEl = document.getElementById("phone-title");
|
||||
if (ptEl) ptEl.style.opacity = S.titleFade;
|
||||
var ltEl = document.getElementById("laptop-title");
|
||||
if (ltEl) ltEl.style.opacity = S.titleFade;
|
||||
var pcEl = document.getElementById("phone-count");
|
||||
if (pcEl) pcEl.textContent = "Catalog " + Math.round(S.counter);
|
||||
var lcEl = document.getElementById("laptop-count");
|
||||
if (lcEl) lcEl.textContent = "Catalog " + Math.round(S.counter);
|
||||
// ── Animate live HTML content (captured to texture every frame) ──
|
||||
// Title fade-in
|
||||
document.getElementById("phone-title").style.opacity = S.titleFade;
|
||||
document.getElementById("laptop-title").style.opacity = S.titleFade;
|
||||
// Counter
|
||||
var cnt = Math.round(S.counter);
|
||||
document.getElementById("phone-count").textContent = "Catalog " + cnt;
|
||||
document.getElementById("laptop-count").textContent = "Catalog " + cnt;
|
||||
// Staggered card reveal
|
||||
var allCards = document.querySelectorAll(".anim-card");
|
||||
for (var ci2 = 0; ci2 < allCards.length; ci2++) {
|
||||
var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
|
||||
allCards[ci2].style.opacity = cardProgress;
|
||||
allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
|
||||
}
|
||||
if (phoneScrollEl) phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
|
||||
if (lapScrollEl) lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
|
||||
// Scroll
|
||||
phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
|
||||
lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
|
||||
// Re-capture HTML to texture
|
||||
captureScreens();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user