|
725 | 725 |
|
726 | 726 | tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0); |
727 | 727 |
|
728 | | - // ── Act 1 (0–3.5s): iPhone FRONT — hero close-up showing hyperframes.dev |
729 | | - tl.to(S, { phRY: PI + 0.06, phRX: 0.015, duration: 1.5, ease: breatheEase }, 0.3); |
730 | | - tl.to(S, { phRY: PI - 0.04, phRX: -0.01, duration: 1.5, ease: breatheEase }, 1.8); |
731 | | - |
732 | | - // ── Act 2 (3.5–7s): iPhone spins 180° to show BACK (camera, titanium, Apple logo) |
733 | | - tl.to(S, { phRY: PI * 2, duration: 2.2, ease: spinEase }, 3.5); |
734 | | - tl.to(S, { cZ: 4.8, cY: 0.25, duration: 2, ease: driftEase }, 3.5); |
735 | | - // Hold back view — slight orbit to appreciate hardware |
736 | | - tl.to( |
737 | | - S, |
738 | | - { phRY: PI * 2 + 0.15, phRX: 0.04, cX: 0.15, duration: 1.5, ease: breatheEase }, |
739 | | - 5.5, |
740 | | - ); |
741 | | - |
742 | | - // ── Act 3 (7–9s): iPhone spins back to front, then exits LEFT off screen |
743 | | - tl.to(S, { phRY: PI * 3, duration: 1.8, ease: snapEase }, 7); |
744 | | - tl.to(S, { cZ: 3.5, cY: 0.2, duration: 1.5, ease: driftEase }, 7); |
745 | | - tl.to(S, { phX: -6, phZ: 0.3, duration: 2, ease: spinEase }, 8); |
746 | | - |
747 | | - // ── Act 4 (9–11s): MacBook enters from right, hero close-up |
748 | | - tl.to(S, { lpX: 0, duration: 2, ease: enterEase }, 9); |
749 | | - tl.to(S, { cX: 0, clX: 0, cZ: 5, cY: 0.3, clY: -0.1, duration: 2, ease: driftEase }, 9); |
750 | | - tl.to(S, { lpRY: 0.06, duration: 1.5, ease: breatheEase }, 10); |
751 | | - |
752 | | - // ── Act 5 (11–12.5s): iPhone returns, both settle for turntable |
753 | | - tl.to(S, { phX: -2.0, duration: 1.5, ease: enterEase }, 11); |
754 | | - tl.to(S, { lpX: 2.2, duration: 1.5, ease: breatheEase }, 11); |
755 | | - tl.to( |
756 | | - S, |
757 | | - { cX: 0.1, clX: 0.1, cZ: 7.5, cY: 0.5, clY: -0.1, duration: 1.5, ease: driftEase }, |
758 | | - 11, |
759 | | - ); |
760 | | - tl.to(S, { phRY: PI * 3, lpRY: 0, duration: 1, ease: breatheEase }, 11); |
761 | | - |
762 | | - // ── Act 6 (12.5–15s): 360° turntable — both devices rotate together |
763 | | - tl.to(S, { turn: PI * 2, duration: 2.5, ease: spinEase }, 12.5); |
| 728 | + // ── macOS Tahoe: MacBook hero — zoomed close, slow pull-back ── |
| 729 | + // Move iPhone off screen immediately |
| 730 | + tl.set(S, { phX: 10 }, 0); |
| 731 | + // Start MacBook centered and close |
| 732 | + tl.set(S, { lpX: 0, lpRY: 0 }, 0); |
| 733 | + tl.set(S, { cX: 0, clX: 0, cZ: 4.5, cY: 0.4, clY: -0.1 }, 0); |
| 734 | + |
| 735 | + // Slow zoom out |
| 736 | + tl.to(S, { cZ: 7, cY: 0.6, duration: 12, ease: driftEase }, 0.5); |
| 737 | + |
| 738 | + // Gentle breathing tilt |
| 739 | + tl.to(S, { lpRY: 0.04, duration: 4, ease: breatheEase }, 1); |
| 740 | + tl.to(S, { lpRY: -0.03, duration: 4, ease: breatheEase }, 5); |
| 741 | + tl.to(S, { lpRY: 0.02, duration: 4, ease: breatheEase }, 9); |
764 | 742 |
|
765 | 743 | // ── Live HTML Animations (captured to 3D textures every frame) ── |
766 | 744 | // Title fade in |
|
0 commit comments