125 lines
7.0 KiB
HTML
125 lines
7.0 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:#f7f1e5;color:#3a2c1f;font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#f7f1e5}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
|
|
.kicker{font-family:ui-monospace,'Courier New',monospace;letter-spacing:.35em;font-size:30px;color:#a05c3c;margin-bottom:28px}
|
|
h1{font-weight:normal;font-size:96px;line-height:1.15;margin:0}
|
|
.sub{font-family:ui-monospace,'Courier New',monospace;font-size:32px;color:#6b5a47;line-height:1.6;max-width:1200px}
|
|
.bg{position:absolute;inset:0}
|
|
/* s1 seed tin */
|
|
.tin{position:absolute;width:420px;height:300px;left:760px;top:420px;background:#5b4632;border-radius:18px;border-top:30px solid #7a5f42;box-shadow:0 28px 50px rgba(90,65,40,.35)}
|
|
.tin:after{content:'';position:absolute;left:60px;right:60px;top:48px;height:4px;background:#c9a878}
|
|
.tinglow{position:absolute;left:660px;top:340px;width:600px;height:460px;background:radial-gradient(closest-side,#e8c97f88,transparent)}
|
|
/* s2 ledger */
|
|
.ledger{position:absolute;width:1280px;height:780px;left:320px;top:230px;opacity:0;transform:rotate(-1.2deg)}
|
|
.row{height:92px;border-bottom:2px solid #d8c9ae;font-family:ui-monospace,'Courier New',monospace;font-size:44px;color:#6b5a47;display:flex;align-items:center;padding:0 60px}
|
|
.row b{color:#3a2c1f;font-weight:normal}
|
|
.row .mark{padding-left:40px;color:#a05c3c}
|
|
/* s3 two lanes */
|
|
.lane{position:absolute;height:150px;top:440px;border-radius:90px}
|
|
.laneA{left:120px;width:700px;background:#cfc0a2}
|
|
.laneB{left:1080px;width:720px;background:#a05c3c;opacity:0}
|
|
.tag{position:absolute;font-family:ui-monospace,'Courier New',monospace;font-size:34px;color:#6b5a47;letter-spacing:.15em}
|
|
/* s4 dawn */
|
|
.bar{position:absolute;bottom:0;width:150px;background:#3a2c1f;border-top:6px solid #a05c3c}
|
|
.sun{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,#e8c97f,transparent)}
|
|
.bigtitle{font-size:130px;line-height:1.1;max-width:1500px;text-align:center}
|
|
</style></head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="90">
|
|
|
|
<section id="s1" class="clip" data-start="0" data-duration="22" data-track-index="1">
|
|
<div class="bg" style="background:#f7f1e5"></div>
|
|
<div class="tinglow"></div>
|
|
<div class="tin"></div>
|
|
<div style="position:absolute;top:120px;left:0;right:0;text-align:center">
|
|
<div class="kicker">THE SPARE · SEED TIN</div>
|
|
<h1 style="text-align:center">The year the<br/>first one fails</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s2" class="clip" data-start="22" data-duration="24" data-track-index="1">
|
|
<div class="bg" style="background:#f2ead9"></div>
|
|
<div style="position:absolute;top:70px;left:0;right:0;text-align:center">
|
|
<div class="kicker">THE FROST DATE · RISK REGISTER</div>
|
|
<h1 style="text-align:center;font-size:76px">Plant late, on purpose</h1>
|
|
</div>
|
|
<div id="ledger" class="ledger">
|
|
<div class="row"><b>Last frost on record</b><span class="mark">— plus one week margin</span></div>
|
|
<div class="row"><b>Safety stock</b><span class="mark">ok</span></div>
|
|
<div class="row"><b>Alternate supplier</b><span class="mark">printed · walked · stamped</span></div>
|
|
<div class="row"><b>Procedure 44-A</b><span class="mark">tested in October</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s3" class="clip" data-start="46" data-duration="20" data-track-index="1">
|
|
<div class="bg" style="background:#efe6d2"></div>
|
|
<div style="position:absolute;top:120px;left:0;right:0;text-align:center">
|
|
<div class="kicker">THE ALTERNATE ROW</div>
|
|
<h1 style="text-align:center;font-size:84px">The lane that was<br/>already walked</h1>
|
|
</div>
|
|
<div id="laneA" class="lane"></div>
|
|
<div id="laneB" class="lane"></div>
|
|
<div id="tagA" class="tag" style="top:620px;left:180px">primary · holds</div>
|
|
<div id="tagB" class="tag" style="top:620px;left:1150px">alternate · ready</div>
|
|
</section>
|
|
|
|
<section id="s4" class="clip" data-start="66" data-duration="24" data-track-index="1">
|
|
<div class="bg" style="background:linear-gradient(#f7f1e5,#efe2c8)"></div>
|
|
<div class="sun" style="top:340px;left:700px"></div>
|
|
<div style="position:absolute;bottom:250px;left:0;right:0;text-align:center;z-index:3">
|
|
<div class="kicker">DAWN · AFTER THE FROST</div>
|
|
<h1 class="bigtitle">Sowing the spare</h1>
|
|
<div class="sub" style="margin:30px auto 0">ready enough that the frost hardly mattered</div>
|
|
</div>
|
|
<div id="bars"></div>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="22"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="46"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="66"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
|
|
|
|
<script>
|
|
const bars = document.getElementById('bars');
|
|
for (let i = 0; i < 9; i++) {
|
|
const b = document.createElement('div');
|
|
b.className = 'bar';
|
|
b.style.left = (140 + i * 200) + 'px';
|
|
b.style.height = (160 + (i % 4) * 90) + 'px';
|
|
b.style.opacity = 0;
|
|
b.id = 'bar' + i;
|
|
bars.appendChild(b);
|
|
}
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
tl.set(['#s1','#s2','#s3','#s4'], { opacity: 0 });
|
|
tl.set('#s1', { opacity: 1, zIndex: 1 }, 0);
|
|
tl.set('#s2', { opacity: 1, zIndex: 2 }, 22);
|
|
tl.set('#s3', { opacity: 1, zIndex: 3 }, 46);
|
|
tl.set('#s4', { opacity: 1, zIndex: 4 }, 66);
|
|
|
|
tl.from('.tin', { y: 120, opacity: 0, duration: 1.1, ease: 'power2.out' }, 1.5);
|
|
tl.from('#s1 h1', { opacity: 0, y: 26, duration: 1, ease: 'power2.out' }, 2.6);
|
|
tl.to('.tinglow', { opacity: 0.35, duration: 6, ease: 'sine.inOut' }, 3);
|
|
|
|
tl.to('#ledger', { opacity: 1, rotate: 0, duration: 1, ease: 'power2.out' }, 24);
|
|
tl.from('.row', { opacity: 0, x: -40, duration: 0.8, stagger: 0.5, ease: 'power2.out' }, 25);
|
|
|
|
tl.to('#laneA', { opacity: 0.35, duration: 0.8 }, 47.5);
|
|
tl.to('#laneB', { opacity: 1, duration: 1.6, ease: 'power2.out' }, 49);
|
|
tl.from('#tagB', { opacity: 0, x: -20, duration: 0.8 }, 52);
|
|
|
|
tl.from('.sun', { scale: 0.7, opacity: 0, duration: 2.4, ease: 'sine.inOut' }, 68);
|
|
tl.from('#s4 h1', { opacity: 0, y: 30, duration: 1.1, ease: 'power2.out' }, 69);
|
|
tl.from('#s4 .sub', { opacity: 0, y: 16, duration: 1, ease: 'power2.out' }, 71);
|
|
tl.from('.bar', { opacity: 0, y: 60, duration: 1.4, stagger: 0.15, ease: 'power3.out' }, 71);
|
|
|
|
window.__timelines['main'] = tl;
|
|
</script>
|
|
</body></html> |