124 lines
6.6 KiB
HTML
124 lines
6.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head><meta charset="UTF-8"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>The Hold Before the Rise · Adria Hassan</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body{margin:0;background:#f4ead8;color:#2c241f;font-family:Georgia,"Times New Roman",serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;opacity:0}
|
||
|
|
.bg{position:absolute;inset:0}
|
||
|
|
.kicker{font-family:"Palatino Linotype",Palatino,Georgia,serif;letter-spacing:.28em;text-transform:uppercase;font-size:22px;opacity:.72;margin:0 0 18px}
|
||
|
|
.title{font-size:86px;line-height:1.02;margin:0;font-weight:700;letter-spacing:-.02em}
|
||
|
|
.sub{font-size:34px;line-height:1.35;margin:28px 0 0;max-width:1280px}
|
||
|
|
.frame{position:absolute;left:120px;right:120px;top:160px}
|
||
|
|
.rule{height:4px;width:180px;background:#8c4a2a;margin:28px 0}
|
||
|
|
.chalk{color:#f3efe2}
|
||
|
|
.alarm{font-size:220px;line-height:0.9;margin:0;letter-spacing:-.04em;font-weight:700}
|
||
|
|
.trio{display:flex;gap:48px;margin-top:40px}
|
||
|
|
.card{flex:1;background:#fffaf0;border:3px solid #2c241f;padding:36px 40px}
|
||
|
|
.card h3{margin:0 0 16px;font-size:28px;letter-spacing:.12em;text-transform:uppercase;color:#8c4a2a}
|
||
|
|
.card p{margin:0;font-size:28px;line-height:1.4}
|
||
|
|
.word{font-size:120px;line-height:1;margin:0 0 12px;font-weight:700}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="75">
|
||
|
|
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="20" data-track-index="1">
|
||
|
|
<div class="bg" style="background:#f4ead8"></div>
|
||
|
|
<svg viewBox="0 0 1920 1080" width="1920" height="1080" style="position:absolute;inset:0">
|
||
|
|
<circle id="s1-sun" cx="1540" cy="260" r="90" fill="#d08a3a"/>
|
||
|
|
<path d="M0 780 L220 620 L380 700 L620 480 L860 640 L1100 420 L1380 610 L1600 500 L1920 680 L1920 1080 L0 1080 Z" fill="#3d4a38"/>
|
||
|
|
<path d="M0 880 L280 760 L520 820 L800 700 L1120 810 L1400 720 L1680 800 L1920 740 L1920 1080 L0 1080 Z" fill="#2c241f"/>
|
||
|
|
</svg>
|
||
|
|
<div class="frame">
|
||
|
|
<p id="s1-kicker" class="kicker">American Fork · Wasatch foothills</p>
|
||
|
|
<h1 id="s1-title" class="title">The hold<br>before the rise</h1>
|
||
|
|
<div id="s1-rule" class="rule"></div>
|
||
|
|
<p id="s1-sub" class="sub">Sourdough, first light on Timpanogos, and the patience I ask of a classroom.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s2" class="clip" data-start="20" data-duration="18" data-track-index="1">
|
||
|
|
<div class="bg" style="background:#24382e"></div>
|
||
|
|
<div class="frame chalk">
|
||
|
|
<p id="s2-kicker" class="kicker chalk" style="color:#c9d6c4">Lesson two · July 16, 1969</p>
|
||
|
|
<p id="s2-alarm" class="alarm">1202</p>
|
||
|
|
<div id="s2-rule" class="rule" style="background:#e8c27a"></div>
|
||
|
|
<p id="s2-sub" class="sub chalk">Not a crash. A choice. The Apollo guidance computer dropped what could wait so the landing could stay.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s3" class="clip" data-start="38" data-duration="18" data-track-index="1">
|
||
|
|
<div class="bg" style="background:#efe4cf"></div>
|
||
|
|
<div class="frame">
|
||
|
|
<p id="s3-kicker" class="kicker">Homeroom protocol</p>
|
||
|
|
<h1 id="s3-title" class="title" style="font-size:64px">Load-shed the extra cinnamon</h1>
|
||
|
|
<div id="s3-cards" class="trio">
|
||
|
|
<div class="card">
|
||
|
|
<h3>Keep</h3>
|
||
|
|
<p>One strong thread. Stretch-and-fold. The work that lands the unit.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<h3>Shed</h3>
|
||
|
|
<p>Ten good intentions. The garnish worksheets. Noise that fights the crust.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<h3>Rest</h3>
|
||
|
|
<p>Bulk ferment. Silent reading. Time is an ingredient, not a leftover.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s4" class="clip" data-start="56" data-duration="19" data-track-index="1">
|
||
|
|
<div class="bg" style="background:#2c241f"></div>
|
||
|
|
<div class="frame" style="color:#f4ead8">
|
||
|
|
<p id="s4-kicker" class="kicker" style="color:#d4b48a">Closing bell</p>
|
||
|
|
<p id="s4-w1" class="word">Ferment.</p>
|
||
|
|
<p id="s4-w2" class="word">Align.</p>
|
||
|
|
<p id="s4-w3" class="word">Emerge.</p>
|
||
|
|
<p id="s4-sub" class="sub" style="color:#e8d9c2">Adria Hassan · secondary school, American Fork, Utah</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="20"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="38"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="56"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
tl.set("#s1", { opacity: 1 }, 0);
|
||
|
|
tl.from("#s1-sun", { scale: 0.7, transformOrigin: "50% 50%", duration: 8, ease: "power1.out" }, 0);
|
||
|
|
tl.from("#s1-kicker", { y: 16, opacity: 0, duration: 0.7, ease: "power3.out" }, 0.3);
|
||
|
|
tl.from("#s1-title", { y: 28, opacity: 0, duration: 0.9, ease: "power3.out" }, 0.5);
|
||
|
|
tl.from("#s1-rule", { scaleX: 0, transformOrigin: "0% 50%", duration: 0.6 }, 1.1);
|
||
|
|
tl.from("#s1-sub", { y: 18, opacity: 0, duration: 0.8 }, 1.3);
|
||
|
|
tl.to("#s1", { opacity: 0, duration: 0.55 }, 19.4);
|
||
|
|
|
||
|
|
tl.to("#s2", { opacity: 1, duration: 0.55 }, 20);
|
||
|
|
tl.from("#s2-kicker", { y: 16, opacity: 0, duration: 0.6 }, 20.3);
|
||
|
|
tl.from("#s2-alarm", { y: 40, opacity: 0, duration: 0.9, ease: "power3.out" }, 20.5);
|
||
|
|
tl.from("#s2-rule", { scaleX: 0, transformOrigin: "0% 50%", duration: 0.5 }, 21.2);
|
||
|
|
tl.from("#s2-sub", { y: 16, opacity: 0, duration: 0.7 }, 21.4);
|
||
|
|
tl.to("#s2", { opacity: 0, duration: 0.5 }, 37.5);
|
||
|
|
|
||
|
|
tl.to("#s3", { opacity: 1, duration: 0.5 }, 38);
|
||
|
|
tl.from("#s3-kicker", { y: 14, opacity: 0, duration: 0.55 }, 38.25);
|
||
|
|
tl.from("#s3-title", { y: 22, opacity: 0, duration: 0.7 }, 38.4);
|
||
|
|
tl.from("#s3-cards", { y: 24, opacity: 0, duration: 0.8 }, 38.8);
|
||
|
|
tl.to("#s3", { opacity: 0, duration: 0.5 }, 55.5);
|
||
|
|
|
||
|
|
tl.to("#s4", { opacity: 1, duration: 0.5 }, 56);
|
||
|
|
tl.from("#s4-kicker", { y: 12, opacity: 0, duration: 0.5 }, 56.3);
|
||
|
|
tl.from("#s4-w1", { y: 24, opacity: 0, duration: 0.55 }, 56.6);
|
||
|
|
tl.from("#s4-w2", { y: 24, opacity: 0, duration: 0.55 }, 57.2);
|
||
|
|
tl.from("#s4-w3", { y: 24, opacity: 0, duration: 0.55 }, 57.8);
|
||
|
|
tl.from("#s4-sub", { opacity: 0, duration: 0.8 }, 58.6);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|