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

fix: iOS 26 zoom-out camera, notification glass paint cycle, engine WebGPU flag

Browse Source
This commit is contained in:
Miguel Ángel
2026-05-23 16:35:50 -04:00
parent 1891578dd6
commit 5f02161ec1
2 changed files with 30 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
Vendored
+13 -47
View File
@@ -717,56 +717,22 @@
tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
// ── Act 1 (0–3.5s): iPhone FRONT — hero close-up showing hyperframes.dev
tl.to(S, { phRY: PI + 0.06, phRX: 0.015, duration: 1.5, ease: breatheEase }, 0.3);
tl.to(S, { phRY: PI - 0.04, phRX: -0.01, duration: 1.5, ease: breatheEase }, 1.8);
// ── iOS 26 Showcase: zoomed-in hero → slow zoom out ──
// Start very close to the screen, facing front
// Camera starts close (cZ=2.5) and slowly pulls back (cZ=5)
tl.to(S, { cZ: 5, duration: 12, ease: driftEase }, 0.5);
tl.to(S, { cY: 0.3, duration: 12, ease: driftEase }, 0.5);
// ── Act 2 (3.5–7s): iPhone spins 180° to show BACK (camera, titanium, Apple logo)
tl.to(S, { phRY: PI * 2, duration: 2.2, ease: spinEase }, 3.5);
tl.to(S, { cZ: 4.8, cY: 0.25, duration: 2, ease: driftEase }, 3.5);
// Hold back view — slight orbit to appreciate hardware
tl.to(
S,
{ phRY: PI * 2 + 0.15, phRX: 0.04, cX: 0.15, duration: 1.5, ease: breatheEase },
5.5,
);
// Very gentle tilt — shows the glass icon refraction from slightly different angles
tl.to(S, { phRY: PI + 0.04, phRX: 0.01, duration: 4, ease: breatheEase }, 0.5);
tl.to(S, { phRY: PI - 0.03, phRX: -0.008, duration: 4, ease: breatheEase }, 4.5);
tl.to(S, { phRY: PI + 0.02, phRX: 0.005, duration: 4, ease: breatheEase }, 8.5);
// ── Act 3 (7–9s): iPhone spins back to front, then exits LEFT off screen
tl.to(S, { phRY: PI * 3, duration: 1.8, ease: snapEase }, 7);
tl.to(S, { cZ: 3.5, cY: 0.2, duration: 1.5, ease: driftEase }, 7);
tl.to(S, { phX: -6, phZ: 0.3, duration: 2, ease: spinEase }, 8);
// No scroll — keep the home screen static
// No 360° turntable — just the gentle zoom out
// ── Act 4 (9–11s): MacBook enters from right, hero close-up
tl.to(S, { lpX: 0, duration: 2, ease: enterEase }, 9);
tl.to(S, { cX: 0, clX: 0, cZ: 5, cY: 0.3, clY: -0.1, duration: 2, ease: driftEase }, 9);
tl.to(S, { lpRY: 0.06, duration: 1.5, ease: breatheEase }, 10);
// ── Act 5 (11–12.5s): iPhone returns, both settle for turntable
tl.to(S, { phX: -2.0, duration: 1.5, ease: enterEase }, 11);
tl.to(S, { lpX: 2.2, duration: 1.5, ease: breatheEase }, 11);
tl.to(
S,
{ cX: 0.1, clX: 0.1, cZ: 7.5, cY: 0.5, clY: -0.1, duration: 1.5, ease: driftEase },
11,
);
tl.to(S, { phRY: PI * 3, lpRY: 0, duration: 1, ease: breatheEase }, 11);
// ── Act 6 (12.5–15s): 360° turntable — both devices rotate together
tl.to(S, { turn: PI * 2, duration: 2.5, ease: spinEase }, 12.5);
// ── Live HTML Animations (captured to 3D textures every frame) ──
// Title fade in
tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);
// Counter animates up
tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
// Cards stagger in (0→1 reveals all cards sequentially)
tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
// Scroll during hero shots
tl.to(S, { scroll: 0.6, duration: 3, ease: breatheEase }, 1.5);
tl.to(S, { scroll: 0, duration: 1.5, ease: driftEase }, 7);
// Scroll on MacBook reveal
tl.to(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);
tl.to(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);
// Move MacBook off screen so it doesn't appear
tl.set(S, { lpX: 10 }, 0);
// __timelines registered in onReady() after GLTF models load
</script>
registry/blocks/liquid-glass-notification/liquid-glass-notification.html
Vendored
+17 -2
View File
@@ -184,15 +184,30 @@
lg.renderGlassElements();
}
var lgReady = false;
lg.waitForInit().then(function (ok) {
if (!ok) return;
renderFrame(0);
lgReady = true;
glassCanvas.onpaint = function () { renderFrame(0); };
if (glassCanvas.requestPaint) glassCanvas.requestPaint();
});
window.__timelines = window.__timelines || {};
var tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 8, ease: "none", onUpdate: function () { renderFrame(tl.time()); } }, 0);
tl.to({}, { duration: 8, ease: "none", onUpdate: function () {
var t = tl.time();
uniforms.uTime.value = t;
threeRenderer.render(threeScene, threeCamera);
if (lgReady) {
glassCanvas.onpaint = function () {
glassCtx.clearRect(0, 0, 1920, 1080);
glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
lg.renderGlassElements();
};
if (glassCanvas.requestPaint) glassCanvas.requestPaint();
}
}}, 0);
// Notification 1: slide in from right, stay top-right, gentle float, slide out
tl.fromTo("#gp1", { left: "1980px" }, { left: "1340px", duration: 0.7, ease: "power3.out" }, 0.2);