86 lines
4.7 KiB
HTML
86 lines
4.7 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:#0b0f14;color:#f2ead9;font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0b0f14}
|
|
.full{position:absolute;inset:0;background-size:cover;background-position:center}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,12,.45),rgba(8,10,12,.88))}
|
|
.title{position:relative;text-align:center;padding:0 220px}
|
|
h1{font-size:112px;line-height:1.05;font-weight:400;letter-spacing:.01em;margin:0 0 28px;opacity:0}
|
|
.kicker{font-size:32px;letter-spacing:.32em;text-transform:uppercase;color:#d9a05b;margin-bottom:60px;font-family:Georgia,serif;opacity:0}
|
|
h2{font-size:84px;line-height:1.1;font-weight:400;margin:0;opacity:0}
|
|
p{font-size:46px;line-height:1.35;font-weight:400;margin:0;max-width:1500px;opacity:0;color:#e8ddc6}
|
|
.big{font-size:104px}
|
|
.sub{font-size:38px;color:#b9a98b;margin-top:40px}
|
|
.rule{width:140px;height:4px;background:#d9a05b;margin:0 auto 60px;opacity:0;transform:scaleX(.2)}
|
|
audio{display:none}
|
|
</style></head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="96">
|
|
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
|
<div class="full" style="background-image:url('https://images.pexels.com/photos/26861433/pexels-photo-26861433.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="shade"></div>
|
|
<div class="title">
|
|
<div class="kicker">A maintenance story · Lumberton, North Carolina</div>
|
|
<h1 id="s1-t">April 1987.<br/>Third shift.</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s2" class="clip" data-start="15" data-duration="27" data-track-index="1">
|
|
<div class="full" style="background-image:url('https://images.pexels.com/photos/5845946/pexels-photo-5845946.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="shade"></div>
|
|
<div class="title">
|
|
<h2 id="s2-t">The big frame press<br/>threw its overload alarm.</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s3" class="clip" data-start="42" data-duration="30" data-track-index="1">
|
|
<div class="full" style="background-image:url('https://images.pexels.com/photos/9627951/pexels-photo-9627951.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="shade"></div>
|
|
<div class="title">
|
|
<p id="s3-t">Same call as Apollo 1201 —<br/>don't shut it all down. Drop the secondary<br/>feed, seal the main line, keep it running.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s4" class="clip" data-start="72" data-duration="24" data-track-index="1">
|
|
<div class="full" style="background-image:url('https://images.pexels.com/photos/39034196/pexels-photo-39034196.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="shade"></div>
|
|
<div class="title">
|
|
<div class="rule"></div>
|
|
<p class="big" id="s4-t">We met the shift.</p>
|
|
<p class="sub" id="s4-s">Garden's no different when frost takes the beans first.</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="15"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="42"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="72"></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.to(".kicker", { opacity: 1, duration: 1.0, ease: "power2.out" }, 0.3);
|
|
tl.to("#s1-t", { opacity: 1, duration: 1.2, ease: "power3.out" }, 0.6);
|
|
tl.to(".kicker", { opacity: 0, duration: 0.6 }, 13.4);
|
|
tl.to("#s1-t", { opacity: 0, y: -14, duration: 0.8, ease: "power2.in" }, 14.0);
|
|
|
|
tl.to("#s2-t", { opacity: 1, duration: 1.0, ease: "power3.out" }, 16.2);
|
|
tl.to("#s2-t", { opacity: 0, y: -12, duration: 0.7, ease: "power2.in" }, 40.4);
|
|
|
|
tl.to("#s3-t", { opacity: 1, duration: 1.0, ease: "power3.out" }, 43.0);
|
|
tl.to("#s3-t", { opacity: 0, y: -12, duration: 0.7, ease: "power2.in" }, 71.0);
|
|
|
|
tl.to("#s4-t", { opacity: 1, duration: 1.0, ease: "power3.out" }, 73.2);
|
|
tl.to(".rule", { opacity: 1, scaleX: 1, duration: 0.8, ease: "power2.out" }, 73.6);
|
|
tl.to("#s4-s", { opacity: 1, duration: 1.2, ease: "power2.out" }, 76.0);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |