241 lines
7.6 KiB
HTML
241 lines
7.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>The Four-Inch Adapter — Apollo 13</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Four-Inch Adapter — Apollo 13">
|
||
|
|
<meta property="og:description" content="APOLLO 13 April 11, 1970 OXYGEN TANK 2 — EXPLOSION DETECTED Source: NASA Mission Control // Wikidata Q182252 THE SQUARE PEGBROKER Command Module…">
|
||
|
|
<meta property="og:url" content="https://bridget-browning.4ort.net/">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="APOLLO 13 April 11, 1970 OXYGEN TANK 2 — EXPLOSION DETECTED Source: NASA Mission Control // Wikidata Q182252 THE SQUARE PEGBROKER Command Module…">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--deep-black: #0a0a0a;
|
||
|
|
--star-field: #1a1a2e;
|
||
|
|
--gold-thread: #d4af37;
|
||
|
|
--steel-gray: #4a5568;
|
||
|
|
--alert-red: #dc2626;
|
||
|
|
--breath-white: #f8fafc;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background: var(--deep-black);
|
||
|
|
color: var(--breath-white);
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root {
|
||
|
|
position: relative;
|
||
|
|
width: 1920px;
|
||
|
|
height: 1080px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: radial-gradient(ellipse at center, var(--star-field) 0%, var(--deep-black) 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.clip {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 4rem;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scene-bg {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 4.5rem;
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
color: var(--gold-thread);
|
||
|
|
text-shadow: 0 0 4rem rgba(212, 175, 55, 0.3);
|
||
|
|
margin: 0;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-3rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
color: var(--steel-gray);
|
||
|
|
margin: 2rem 0 1rem;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.measurement {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
color: var(--breath-white);
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1.8;
|
||
|
|
max-width: 1200px;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.equation {
|
||
|
|
font-size: 2.2rem;
|
||
|
|
color: var(--gold-thread);
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
margin: 3rem 0;
|
||
|
|
opacity: 0;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-bar {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 2rem;
|
||
|
|
background: var(--alert-red);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-adapter {
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
border: 8px solid var(--gold-thread);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
opacity: 0;
|
||
|
|
box-shadow: 0 0 6rem rgba(212, 175, 55, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.square-core {
|
||
|
|
width: 280px;
|
||
|
|
height: 280px;
|
||
|
|
border: 6px solid var(--breath-white);
|
||
|
|
transform: rotate(45deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.credit-line {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 3rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 1.1rem;
|
||
|
|
color: var(--steel-gray);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.source-link {
|
||
|
|
position: absolute;
|
||
|
|
top: 3rem;
|
||
|
|
left: 3rem;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: var(--steel-gray);
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
</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="72">
|
||
|
|
|
||
|
|
<!-- Scene 1: The Crisis -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="14" data-track-index="1">
|
||
|
|
<div class="scene-bg" style="background: linear-gradient(to bottom, #0a0a0a, #1a1a2e);"></div>
|
||
|
|
<h1 id="s1-title">APOLLO 13</h1>
|
||
|
|
<h2 id="s2-subtitle">April 11, 1970</h2>
|
||
|
|
<div class="alert-bar" id="s1-alert">OXYGEN TANK 2 — EXPLOSION DETECTED</div>
|
||
|
|
<div class="source-link" id="s1-source">Source: NASA Mission Control // Wikidata Q182252</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 2: The Problem -->
|
||
|
|
<section id="s2" class="clip" data-start="14" data-duration="16" data-track-index="1">
|
||
|
|
<div class="scene-bg" style="background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);"></div>
|
||
|
|
<h1 id="s2-title">THE SQUARE PEGBROKER</h1>
|
||
|
|
<div class="measurement" id="s2-text">
|
||
|
|
Command Module Canisters: ROUND<br/>
|
||
|
|
Lunar Module Scrubbers: SQUARE<br/>
|
||
|
|
Carbon Dioxide Rising:<span style="color: var(--alert-red)"> 7.5 mmHg per hour</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 3: The Solution -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="18" data-track-index="1">
|
||
|
|
<div class="scene-bg" style="background: radial-gradient(circle, #2a2a3e 0%, #0a0a0a 80%);"></div>
|
||
|
|
<div class="circle-adapter" id="s3-circle">
|
||
|
|
<div class="square-core" id="s3-square"></div>
|
||
|
|
</div>
|
||
|
|
<h2 id="s3-label" style="margin-top: 4rem;">FOUR-INCH ADAPTER</h2>
|
||
|
|
<div class="equation" id="s3-formula">2 LiOH + CO₂ → Li₂CO₃ + H₂O</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 4: The Return -->
|
||
|
|
<section id="s4" class="clip" data-start="48" data-duration="24" data-track-index="1">
|
||
|
|
<div class="scene-bg" style="background: linear-gradient(to top, #0a0a0a, #d4af37, #0a0a0a);"></div>
|
||
|
|
<h1 id="s4-title">ALL THREE RETURNED</h1>
|
||
|
|
<div class="measurement" id="s4-text">
|
||
|
|
Jim Lovell • Jack Swigert • Fred Haise<br/>
|
||
|
|
<span style="color: var(--steel-gray); font-size: 1.1rem;">Wikidata Q318965</span>
|
||
|
|
</div>
|
||
|
|
<div class="credit-line" id="s4-credit">
|
||
|
|
Built from cardboard, plastic bags, and flight manuals.<br/>
|
||
|
|
Not a metaphor. A protocol.
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Audio elements (renderer will populate) -->
|
||
|
|
<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="30"></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.12"></audio>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// Scene 1: The Crisis
|
||
|
|
tl.to(".scene-bg", { opacity: 1, duration: 2.5, ease: "power2.out" }, 0);
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 3, ease: "expo.out" }, 0.5);
|
||
|
|
tl.to("#s2-subtitle", { opacity: 1, duration: 2, ease: "power2.out" }, 2.5);
|
||
|
|
tl.to("#s1-alert", { opacity: 1, duration: 0.5, ease: "steps(4)" }, 4.2);
|
||
|
|
tl.to("#s1-source", { opacity: 1, duration: 1.5, ease: "power2.out" }, 5);
|
||
|
|
|
||
|
|
// Scene 2: The Problem
|
||
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 3, ease: "expo.out" }, 14.5);
|
||
|
|
tl.to("#s2-text", { opacity: 1, duration: 2.5, ease: "power2.out" }, 16);
|
||
|
|
|
||
|
|
// Scene 3: The Solution
|
||
|
|
tl.to("#s3-circle", { opacity: 1, scale: 0.95, duration: 4, ease: "elastic.out(1, 0.5)" }, 30.5);
|
||
|
|
tl.to("#s3-square", { opacity: 1, rotation: 0, duration: 3, ease: "back.out(1.5)" }, 33);
|
||
|
|
tl.to("#s3-label", { opacity: 1, y: 0, duration: 2, ease: "power2.out" }, 36);
|
||
|
|
tl.to("#s3-formula", { opacity: 1, letterSpacing: "0.25em", duration: 3, ease: "power2.inOut" }, 38);
|
||
|
|
|
||
|
|
// Scene 4: The Return
|
||
|
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: 4, ease: "expo.out" }, 48.5);
|
||
|
|
tl.to("#s4-text", { opacity: 1, duration: 2.5, ease: "power2.out" }, 52);
|
||
|
|
tl.to("#s4-credit", { opacity: 1, duration: 3, ease: "power2.out" }, 56);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|