83 lines
5.1 KiB
HTML
83 lines
5.1 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:#fff;font-family:'Courier New',monospace}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#000}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.bg{position:absolute;inset:0}
|
||
|
|
.title{font-size:96px;font-weight:bold;letter-spacing:2px;opacity:0;color:#fff}
|
||
|
|
.sub{font-size:40px;opacity:0;color:#eee}
|
||
|
|
.big{font-size:70px;font-weight:bold}
|
||
|
|
.mono{font-family:'Courier New',monospace}
|
||
|
|
.red{color:#ff3b30}
|
||
|
|
.green{color:#34c759}
|
||
|
|
.amber{color:#ff9f0a}
|
||
|
|
/* terminal grid background for scene 2 */
|
||
|
|
.grid{background-image:linear-gradient(rgba(52,199,89,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(52,199,89,0.08) 1px,transparent 1px);background-size:40px 40px}
|
||
|
|
/* paper-tc background for scene 3 */
|
||
|
|
.paper{background:repeating-linear-gradient(transparent,transparent 35px,#ddd 36px);background-color:#faf6ea}
|
||
|
|
/* ledger lines scene 4 */
|
||
|
|
.ledger{background:linear-gradient(rgba(255,159,10,0.15) 1px,transparent 1px);background-size:28px 28px}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="62">
|
||
|
|
|
||
|
|
<!-- SCENE 1: church / held breath -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="14" data-track-index="1">
|
||
|
|
<div class="bg" style="background:#000"></div>
|
||
|
|
<div id="s1-line" class="title" style="text-align:center;line-height:1.2;padding:0 120px;color:#ddd">
|
||
|
|
WHEN THE<br/>VALVES SING<br/><span style="font-size:44px;color:#999">the whole building holds its breath</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: terminal log entry -->
|
||
|
|
<section id="s2" class="clip" data-start="14" data-duration="17" data-track-index="1">
|
||
|
|
<div class="bg grid" style="background:#050805"></div>
|
||
|
|
<div id="s2-log" class="mono" style="font-size:38px;line-height:1.6;color:#34c759;padding:0 160px;opacity:0;text-align:left">
|
||
|
|
> cycle 872<br/>> leak detected · valve V-3<br/>> rated 5000 · tested 1000<br/>> freeze-open at 4°C<br/><span style="color:#ff9f0a">> REPLACED. paper trail holds.</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: paper ledger / record keeping -->
|
||
|
|
<section id="s3" class="clip" data-start="31" data-duration="17" data-track-index="1">
|
||
|
|
<div class="bg" style="background:#faf6ea"></div>
|
||
|
|
<div id="s3-head" class="mono" style="font-size:52px;font-weight:bold;color:#222;opacity:0;padding:0 160px;text-align:center">THE PAPER TRAIL SAVES LIVES</div>
|
||
|
|
<div id="s3-line" class="mono" style="font-size:34px;color:#333;opacity:0;padding:60px 200px;text-align:center">In building maintenance, as on Apollo — Soyuz 1975,<br/>you write it down, you date it, you sign it.<br/>Then when the building breathes wrong,<br/>you know exactly where to look.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 4: ledger close / hum before trouble -->
|
||
|
|
<section id="s4" class="clip" data-start="48" data-duration="14" data-track-index="1">
|
||
|
|
<div class="bg ledger" style="background:#13100a"></div>
|
||
|
|
<div id="s4-line" class="big mono" style="font-size:66px;color:#ff9f0a;opacity:0;text-align:center;padding:0 160px;line-height:1.3">LISTEN BEFORE<br/>IT BREAKS</div>
|
||
|
|
<div id="s4-sub" class="sub mono" style="font-size:36px;color:#ccc;opacity:0;text-align:center;padding-top:60px">That's the whole shift, brother.<br/>The building hums off-key long before the alarm.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- AUDIO -- direct children of root, timed to scene starts -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="14"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="31"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="48"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
// scene 1
|
||
|
|
tl.to("#s1-line", { opacity: 1, y: 0, duration: 1.0, ease: "power3.out" }, 0.4);
|
||
|
|
tl.to("#s1-line", { opacity: 0, y: -30, duration: 0.8, ease: "power2.in" }, 12.8);
|
||
|
|
// scene 2 terminal typing
|
||
|
|
tl.to("#s2-log", { opacity: 1, duration: 0.3 }, 14.3);
|
||
|
|
tl.to("#s2-log", { opacity: 0, y: -20, duration: 0.7, ease: "power2.in" }, 30.2);
|
||
|
|
// scene 3 paper
|
||
|
|
tl.to("#s3-head", { opacity: 1, duration: 0.6, ease: "power3.out" }, 31.4);
|
||
|
|
tl.to("#s3-line", { opacity: 1, duration: 0.6, ease: "power3.out" }, 32.8);
|
||
|
|
tl.to("#s3-line", { opacity: 0, y: -20, duration: 0.7, ease: "power2.in" }, 46.8);
|
||
|
|
tl.to("#s3-head", { opacity: 0, y: -20, duration: 0.7, ease: "power2.in" }, 47.0);
|
||
|
|
// scene 4 close
|
||
|
|
tl.to("#s4-line", { opacity: 1, scale: 1, duration: 0.9, ease: "power3.out" }, 48.5);
|
||
|
|
tl.to("#s4-sub", { opacity: 1, duration: 0.8, ease: "power3.out" }, 49.6);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body></html>
|