98 lines
5.8 KiB
HTML
98 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content=""ALARM 1201 — executive overflow, ignore.""><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:#0e1412;color:#eef3ef;font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0e1412}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.bg{position:absolute;inset:0}
|
|
.kicker{font-family:Inter,system-ui,sans-serif;letter-spacing:.35em;text-transform:uppercase;font-size:26px;color:#9fb8ad;font-weight:600;margin-bottom:18px}
|
|
.title{font-size:96px;line-height:1.08;font-weight:700;color:#eef3ef;max-width:1500px;text-align:center;margin:0}
|
|
.sub{font-size:40px;line-height:1.35;color:#c9d6cf;max-width:1500px;text-align:center;margin:0}
|
|
.es{font-style:italic;color:#ffd9a0}
|
|
.rule{width:120px;height:4px;background:#7fb99a;margin:34px auto;border:none}
|
|
.mono{font-family:'SF Mono',Menlo,monospace;font-size:34px;color:#8fb3a0}
|
|
.big-num{font-size:220px;font-weight:800;color:#3f6b52;margin:0;line-height:1}
|
|
.tag{font-family:Inter,system-ui,sans-serif;font-size:30px;color:#9fb8ad;letter-spacing:.12em;text-transform:uppercase}
|
|
/* scene layout helpers */
|
|
.col-left{position:absolute;left:260px;top:50%;transform:translateY(-50%);width:820px;text-align:left}
|
|
.col-right{position:absolute;right:260px;top:50%;transform:translateY(-50%);width:720px;text-align:center}
|
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="62">
|
|
<!-- SCENE 1 -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="13" data-track-index="1">
|
|
<div class="bg" style="background:radial-gradient(circle at 20% 30%,#1d2b23 0%,#0e1412 70%)"></div>
|
|
<div style="text-align:center">
|
|
<p class="kicker" id="s1-kick">Seattle · Harborview · Emergency</p>
|
|
<div class="rule"></div>
|
|
<h1 class="title" id="s1-title">The First Question</h1>
|
|
<p class="sub" style="margin-top:30px" id="s1-sub">A pulse has no language.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 2 -->
|
|
<section id="s2" class="clip" data-start="13" data-duration="16" data-track-index="1">
|
|
<div class="bg" style="background:radial-gradient(circle at 80% 70%,#24362b 0%,#0e1412 72%)"></div>
|
|
<div class="col-left">
|
|
<p class="mono" id="s2-mono">HR 128 · BP 82/51 · SPO2 94</p>
|
|
<h1 class="title" id="s2-title" style="font-size:64px;text-align:left">Behind every number, a story with a language of its own.</h1>
|
|
</div>
|
|
<div class="col-right">
|
|
<p class="es" id="s2-es" style="font-size:72px;margin:0">"¿Me escucha?"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 3 -->
|
|
<section id="s3" class="clip" data-start="29" data-duration="17" data-track-index="1">
|
|
<div class="bg" style="background:radial-gradient(circle at 30% 50%,#1a2a2f 0%,#0e1412 75%)"></div>
|
|
<div style="text-align:center">
|
|
<p class="mono" id="s3-mono" style="font-size:30px;color:#8fb3a0">"ALARM 1201 — executive overflow, ignore."</p>
|
|
<h1 class="title" id="s3-title" style="font-size:60px">Graceful degradation<br/>is a human skill too.</h1>
|
|
<p class="sub" id="s3-sub" style="margin-top:26px">Apollo 11 didn't reboot. It slowed down and stayed the course.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 4 -->
|
|
<section id="s4" class="clip" data-start="46" data-duration="16" data-track-index="1">
|
|
<div class="bg" style="background:radial-gradient(circle at 60% 40%,#2c3b2a 0%,#0e1412 80%)"></div>
|
|
<div style="text-align:center">
|
|
<p class="kicker" id="s4-kick">The question that matters</p>
|
|
<p class="es" id="s4-es" style="font-size:104px;margin:0">¿Cómo se siente?</p>
|
|
<p class="sub" id="s4-sub" style="margin-top:28px;font-size:34px">How do you feel?<br/>And we mean it.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- AUDIO -->
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="13"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="29"></audio>
|
|
<audio id="voice-s4" src="audio/s4.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 });
|
|
tl.from("#s1-kick", { opacity: 0, y: -26, duration: 0.8, ease: "power3.out" }, 0.3);
|
|
tl.from("#s1-title", { opacity: 0, y: 30, duration: 1.0, ease: "power3.out" }, 0.8);
|
|
tl.from("#s1-sub", { opacity: 0, duration: 0.9 }, 1.5);
|
|
/* s2 in */
|
|
tl.fromTo("#s2", { opacity: 0 }, { opacity: 1, duration: 0.5 }, 12.6);
|
|
tl.from("#s2-mono", { opacity: 0, x: -40, duration: 0.7 }, 13.3);
|
|
tl.from("#s2-title", { opacity: 0, x: -30, duration: 0.8 }, 14.0);
|
|
tl.from("#s2-es", { opacity: 0, scale: 0.94, duration: 0.9, ease: "power2.out" }, 15.0);
|
|
/* s3 in */
|
|
tl.fromTo("#s3", { opacity: 0 }, { opacity: 1, duration: 0.5 }, 28.4);
|
|
tl.from("#s3-mono", { opacity: 0, y: 20, duration: 0.7 }, 29.2);
|
|
tl.from("#s3-title", { opacity: 0, y: 24, duration: 0.8 }, 30.0);
|
|
tl.from("#s3-sub", { opacity: 0, duration: 0.8 }, 31.2);
|
|
/* s4 in */
|
|
tl.fromTo("#s4", { opacity: 0 }, { opacity: 1, duration: 0.6 }, 45.4);
|
|
tl.from("#s4-kick", { opacity: 0, y: -18, duration: 0.7 }, 46.2);
|
|
tl.from("#s4-es", { opacity: 0, scale: 0.9, duration: 1.1, ease: "power2.out" }, 47.0);
|
|
tl.from("#s4-sub", { opacity: 0, y: 20, duration: 0.9 }, 49.0);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |