118 lines
6.6 KiB
HTML
118 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="ED TRIAGE / NIGHT SHIFT / DETROIT The six breaths a sixty-second respiratory assessment Full cycle, six breaths. Oxygen. CO&#8322;. The whole story.…"><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:#ece7df;color:#1a2a26;font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#ece7df}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.bgabs{position:absolute;inset:0}
|
|
h1{font-size:96px;font-weight:400;line-height:1.05;letter-spacing:-1px}
|
|
h2{font-size:52px;font-weight:400;line-height:1.2}
|
|
.mono{font-family:'Courier New',monospace;font-size:28px;letter-spacing:2px;color:#4a5a54}
|
|
.accent{color:#a33b2e}
|
|
/* breathing waveform */
|
|
.wave{position:absolute;left:0;right:0;height:260px;bottom:180px}
|
|
.wpath{fill:none;stroke:#a33b2e;stroke-width:5;stroke-dasharray:2000;stroke-dashoffset:2000}
|
|
.wexp{fill:none;stroke:#4a7a6a;stroke-width:5;stroke-dasharray:2000;stroke-dashoffset:2000}
|
|
.rule{position:absolute;left:160px;right:160px;height:2px;background:#c9c0b4}
|
|
.num{position:absolute;bottom:120px;font-family:'Courier New',monospace;font-size:40px;color:#7c6f63}
|
|
.vline{position:absolute;top:0;bottom:0;width:1px;background:#d6cdc0}
|
|
</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="63">
|
|
|
|
<!-- scene 1 : the room -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="13" data-track-index="1">
|
|
<div class="bgabs"></div>
|
|
<div style="text-align:center;padding:0 200px">
|
|
<div class="mono" style="opacity:0">ED TRIAGE / NIGHT SHIFT / DETROIT</div>
|
|
<h1 style="opacity:0" id="s1-h">The six <span class="accent">breaths</span></h1>
|
|
<div class="mono" style="opacity:0;margin-top:18px">a sixty-second respiratory assessment</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- scene 2 : watch the rise -->
|
|
<section id="s2" class="clip" data-start="13" data-duration="18" data-track-index="1">
|
|
<div class="bgabs"></div>
|
|
<div class="rule" style="top:340px;opacity:0" id="s2-rule"></div>
|
|
<svg class="wave" id="s2-wave" viewBox="0 0 1200 260" preserveAspectRatio="none" style="opacity:0">
|
|
<path class="wpath" id="s2-in" d="M0,130 L100,130 Q170,130 190,60 Q210,-10 260,60 Q300,130 380,130"/>
|
|
<path class="wexp" id="s2-out" d="M380,130 L520,130 Q590,130 610,60 Q630,-10 680,60 Q720,130 800,130"/>
|
|
</svg>
|
|
<div style="text-align:center;padding:0 220px;position:absolute;top:560px">
|
|
<h2 style="opacity:0" id="s2-title">Full cycle, <span class="accent">six</span> breaths.<br/>Oxygen. CO₂. The whole story.</h2>
|
|
</div>
|
|
<div class="vline" style="left:640px;opacity:0"></div>
|
|
<div class="vline" style="right:640px;opacity:0"></div>
|
|
</section>
|
|
|
|
<!-- scene 3 : what I read -->
|
|
<section id="s3" class="clip" data-start="31" data-duration="15" data-track-index="1">
|
|
<div class="bgabs"></div>
|
|
<div style="text-align:left;padding:0 240px">
|
|
<div class="mono" style="opacity:0" id="s3-head">reading the chest</div>
|
|
<div style="margin-top:40px">
|
|
<div class="mono" style="font-size:34px;line-height:2;opacity:0" id="s3-line">rate / effort / symmetry</div>
|
|
<div class="mono" style="font-size:34px;line-height:2;color:#a33b2e;opacity:0" id="s3-line2">tripod / retractions / full sentences</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- scene 4 : the safety net -->
|
|
<section id="s4" class="clip" data-start="46" data-duration="17" data-track-index="1">
|
|
<div class="bgabs"></div>
|
|
<div style="text-align:center;padding:0 210px">
|
|
<h2 style="opacity:0" id="s4-title">Six breaths. Sixty seconds.<br/>Stable, or <span class="accent">crashing</span>.</h2>
|
|
<div class="mono" style="opacity:0;margin-top:30px" id="s4-sign">that cadence is the first safety net</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- narration 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="13"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="31"></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.16"></audio>
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// s1 intro
|
|
tl.to("#s1 .mono", { opacity: 1, duration: 0.6, ease: "power2.out" }, 0.6);
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 1.2);
|
|
tl.to("#s1 .mono", { opacity: 1, duration: 0.6 }, 1.6);
|
|
// breathe the title
|
|
tl.to("#s1-title", { scale: 1.015, duration: 6, ease: "sine.inOut" }, 3);
|
|
tl.to("#s1-title", { scale: 1, duration: 6, ease: "sine.inOut" }, 9);
|
|
|
|
// s2 waveform draws in, then pulses
|
|
tl.to("#s2-wave", { opacity: 1, duration: 0.4 }, 13.5);
|
|
tl.to("#s2-in", { strokeDashoffset: 0, duration: 2.2, ease: "power1.inOut" }, 13.8);
|
|
tl.to("#s2-out", { strokeDashoffset: 0, duration: 2.2, ease: "power1.inOut" }, 16.2);
|
|
tl.to("#s2-rule", { opacity: 1, duration: 0.5 }, 17.5);
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" }, 18.6);
|
|
// repeat the breath pulse
|
|
tl.to("#s2-in", { strokeDashoffset: 1900, duration: 0.001 }, 22.5);
|
|
tl.to("#s2-in", { strokeDashoffset: 0, duration: 2.0, ease: "power1.inOut" }, 22.6);
|
|
tl.to("#s2-out", { strokeDashoffset: 1900, duration: 0.001 }, 24.6);
|
|
tl.to("#s2-out", { strokeDashoffset: 0, duration: 2.0, ease: "power1.inOut" }, 24.7);
|
|
|
|
// s3 reading list
|
|
tl.to("#s3-head", { opacity: 1, duration: 0.5 }, 31.5);
|
|
tl.to("#s3-line", { opacity: 1, x: 0, duration: 0.6, ease: "power2.out" }, 33);
|
|
tl.to("#s3-line2", { opacity: 1, x: 0, duration: 0.6, ease: "power2.out" }, 36);
|
|
tl.to("#s3-line", { x: -420, opacity: 0, duration: 0.5 }, 40.5);
|
|
tl.to("#s3-line2", { x: -420, opacity: 0, duration: 0.5 }, 42.5);
|
|
|
|
// s4 close
|
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" }, 46.5);
|
|
tl.to("#s4-sign", { opacity: 1, duration: 0.8 }, 53);
|
|
tl.to("#s4-title", { scale: 1.02, duration: 8, ease: "sine.inOut" }, 47);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |