133 lines
6.7 KiB
HTML
133 lines
6.7 KiB
HTML
<!doctype html>
|
||
<html><head><meta charset="UTF-8"/>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
<style>
|
||
body{margin:0;background:#000;color:#e8e6e1;font-family:"IBM Plex Mono",monospace}
|
||
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0a0d10}
|
||
|
||
/* blue-tinged blueprint grid */
|
||
.gridbg{position:absolute;inset:0;
|
||
background-image:
|
||
linear-gradient(rgba(70,120,160,.08) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(70,120,160,.08) 1px, transparent 1px);
|
||
background-size:48px 48px;}
|
||
|
||
.clip{position:absolute;inset:0;display:grid;place-items:center;opacity:1}
|
||
.vine{position:absolute;left:0;top:0;width:100%;height:4px;
|
||
background:linear-gradient(90deg,transparent,#7fc9ff,transparent)}
|
||
|
||
/* ---- scene 1 ---- */
|
||
.bigline{font-size:76px;line-height:1.12;letter-spacing:-1px;max-width:1500px;
|
||
font-family:Georgia,serif;font-weight:600;text-align:left;padding:0 140px}
|
||
.bigline .hl{color:#7fc9ff}
|
||
.kicker{font-size:34px;letter-spacing:.5em;color:#8a8a84;text-transform:uppercase;margin-bottom:40px;padding-left:150px}
|
||
.earth{position:absolute;right:-160px;bottom:-260px;width:820px;height:820px;border-radius:50%;
|
||
background:radial-gradient(circle at 38% 32%, #1c4a74 0%, #0a2238 55%, #040e18 100%);
|
||
box-shadow:0 0 220px rgba(60,140,220,.35)}
|
||
|
||
/* ---- scene 2: the DSKY ---- */
|
||
.panel{width:720px;padding:46px 50px;border:2px solid #3a4c5e;border-radius:14px;
|
||
background:#131a20;box-shadow:0 0 0 10px #0a0d10, 0 0 60px rgba(90,150,200,.15)}
|
||
.panelhead{font-size:26px;letter-spacing:.35em;color:#56677a;text-align:center;margin-bottom:30px}
|
||
.window{background:#04110c;border:2px solid #1d6a4a;border-radius:8px;
|
||
color:#66ffb2;font-family:monospace;text-align:center;padding:30px 20px;min-height:120px;
|
||
font-size:44px;letter-spacing:.12em;text-shadow:0 0 18px rgba(102,255,178,.5)}
|
||
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
|
||
.key{background:#1b2229;border:1px solid #394757;border-radius:8px;color:#c9d3dd;
|
||
font-family:monospace;font-size:30px;text-align:center;padding:16px 0}
|
||
.key.verb{color:#ffb347;border-color:#8a5a22}
|
||
.captline{margin-top:30px;font-size:24px;color:#5a6a78;text-align:center;
|
||
letter-spacing:.08em}
|
||
/* thread animation elements */
|
||
.rope{position:absolute;left:50%;top:-120px;transform:translateX(-50%);
|
||
width:6px;background:repeating-linear-gradient(180deg,#b87333 0 10px,#8a5426 10px 20px);
|
||
height:0}
|
||
.dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffb347;
|
||
box-shadow:0 0 20px rgba(255,179,71,.9)}
|
||
|
||
/* ---- scene 3 ---- */
|
||
.foot{font-family:Georgia,serif;font-size:52px;line-height:1.25;max-width:1400px;padding:0 140px;text-align:left}
|
||
.foot b{color:#7fc9ff;font-weight:700}
|
||
.sig{position:absolute;left:150px;bottom:80px;font-size:26px;color:#8a8a84;letter-spacing:.2em}
|
||
.credit{position:absolute;right:60px;bottom:40px;font-size:20px;color:#4a5748;letter-spacing:.1em}
|
||
</style></head>
|
||
<body>
|
||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="72">
|
||
<div class="gridbg"></div>
|
||
|
||
<!-- ====== SCENE 1: 0-12 ====== -->
|
||
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||
<div class="earth"></div>
|
||
<div>
|
||
<div class="kicker">The Rope · Apollo Guidance Computer</div>
|
||
<h1 class="bigline" style="opacity:0;transform:translateY(24px)">Every builder knows the moment<br/>the <span class="hl">plans die on contact</span><br/>with the real world.</h1>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== SCENE 2: 12-46 ====== -->
|
||
<section id="s2" class="clip" data-start="12" data-duration="34" data-track-index="1">
|
||
<div class="rope" id="rope" style="opacity:0"></div>
|
||
<div class="panel" style="opacity:0;transform:scale(.96)">
|
||
<div class="panelhead">DSKY · DISPLAY & KEYBOARD</div>
|
||
<div class="window" id="dscreen">00 000 VR 000 000 55</div>
|
||
<div class="keys">
|
||
<div class="key">PRO</div><div class="key">VERB</div><div class="key">NOUN</div>
|
||
<div class="key verb">+</div><div class="key">0-9</div><div class="key verb">–</div>
|
||
<div class="key">CLR</div><div class="key">KEY REL</div><div class="key verb">ENTER</div>
|
||
</div>
|
||
<div class="captline">one wire through the core = 1 · skipped = 0</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== SCENE 3: 46-72 ====== -->
|
||
<section id="s3" class="clip" data-start="46" data-duration="26" data-track-index="1">
|
||
<div class="vine"></div>
|
||
<div>
|
||
<p class="foot" style="opacity:0;transform:translateY(26px)"><b>What you build to survive cross-examination.</b><br/>The craft never yells. It just tells you,<br/>if you slow down and look.</p>
|
||
</div>
|
||
<div class="sig" style="opacity:0">ALBERT WOBO · FROM THE JOB SITE</div>
|
||
<div class="credit">Raytheon · Margaret Hamilton's team · core rope memory</div>
|
||
</section>
|
||
|
||
<!-- voiceovers, direct children of root, timed -->
|
||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
<audio id="voice-s2" src="audio/s2.wav" data-start="12"></audio>
|
||
<audio id="voice-s3" src="audio/s3.wav" data-start="46"></audio>
|
||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
|
||
</div>
|
||
<script>
|
||
window.__timelines = window.__timelines || {};
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
/* S1 */
|
||
tl.to("#s1 .bigline", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
|
||
tl.fromTo("#s1 .kicker", {opacity:0, letterSpacing:"0.2em"}, {opacity:1, letterSpacing:"0.5em", duration:1.4}, 0.2);
|
||
tl.to(".earth", { scale:1.05, duration:12, ease:"none" }, 0);
|
||
|
||
/* S2 */
|
||
tl.to("#s2 .panel", { opacity:1, scale:1, duration:1.0, ease:"power3.out" }, 13.2);
|
||
tl.set("#rope", {opacity:1, height:0}, 13.6);
|
||
tl.to("#rope", { height:520, duration:6, ease:"power1.inOut" }, 13.6);
|
||
/* blinking readouts */
|
||
tl.to("#dscreen", {}, 0);
|
||
const dscreen = document.getElementById("dscreen");
|
||
for (let t=16; t<44; t+=1.1) {
|
||
tl.set("#dscreen", {opacity:1}, t);
|
||
tl.set("#dscreen", {opacity:0.25}, t+0.55);
|
||
}
|
||
/* key press flashes, punctuation marks */
|
||
tl.to("#s2 .key.verb", {opacity:1,scale:1.02,duration:0.15}, 22);
|
||
tl.to("#s2 .key.verb", {opacity:1,scale:1,duration:0.2}, 22.4);
|
||
tl.to("#s2 .key", {opacity:0.65,duration:0.15}, 30);
|
||
tl.to("#s2 .key", {opacity:1,duration:0.2}, 30.4);
|
||
tl.to("#s2 .captline", {opacity:0.5,color:"#7fc9ff",duration:0.3}, 34);
|
||
|
||
/* S3 */
|
||
tl.to("#s3 .foot", { opacity:1, y:0, duration:0.9, ease:"power3.out" }, 47.4);
|
||
tl.to("#s3 .sig", { opacity:1, duration:0.8 }, 54);
|
||
tl.to("#s3 .foot b", { opacity:1, color:"#ffb347", duration:1.0 }, 50);
|
||
tl.to(".vine", { opacity:0.35, duration:20, ease:"none" }, 46);
|
||
|
||
window.__timelines["main"] = tl;
|
||
</script>
|
||
</body></html> |