116 lines
5.5 KiB
HTML
116 lines
5.5 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:#1a1a1a;color:#fff;font-family:'Courier New',monospace}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#f5f0e8;color:#1a1a1a}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
|
|
/* full-bleed scenes */
|
|
.bg{position:absolute;inset:0}
|
|
.grain{position:absolute;inset:0;opacity:0}
|
|
/* typography */
|
|
.big{font-weight:700;text-transform:uppercase;letter-spacing:-2px;line-height:.95}
|
|
.sub{font-style:italic;opacity:.75;margin-top:18px;font-size:44px}
|
|
.num{font-size:150px;font-weight:700;opacity:.25;position:absolute;top:40px;left:60px}
|
|
.tag{position:absolute;top:44px;right:60px;font-size:26px;letter-spacing:4px;text-transform:uppercase;border:3px dashed #1a1a1a;padding:8px 18px}
|
|
/* shapes — deck art energy */
|
|
.stripe{position:absolute;height:14px;transform:rotate(-8deg)}
|
|
.wave{position:absolute;border-radius:50%;border:10px solid #1a1a1a;opacity:.8}
|
|
/* scene palettes */
|
|
#s1 .bg{background:#2a9d8f}
|
|
#s1{color:#f5f0e8}
|
|
#s2 .bg{background:#e63946}
|
|
#s2{color:#f5f0e8}
|
|
#s3 .bg{background:#e9c46a}
|
|
#s3{color:#1a1a1a}
|
|
#s4 .bg{background:#1a1a1a}
|
|
#s4{color:#f5f0e8}
|
|
</style></head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="34">
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="8"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="19"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="27"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
|
|
|
<section id="s1" class="clip" data-start="0" data-duration="8" data-track-index="1">
|
|
<div class="bg"></div>
|
|
<div class="wave" style="width:700px;height:700px;left:-180px;top:-120px"></div>
|
|
<div class="wave" style="width:520px;height:520px;right:-120px;bottom:-140px;border-color:#f5f0e8"></div>
|
|
<div class="num">07</div>
|
|
<div class="tag">the wood</div>
|
|
<div style="position:relative;text-align:center;max-width:1400px;padding:0 80px">
|
|
<h1 class="big" id="s1-title" style="font-size:130px">HUMIDITY<br/>WANTS TO EAT THE GRAIN</h1>
|
|
<p class="sub">seven plies of maple, breathing for 72 hours</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s2" class="clip" data-start="8" data-duration="11" data-track-index="1">
|
|
<div class="bg"></div>
|
|
<div class="stripe" style="width:900px;top:180px;left:-120px;background:#f5f0e8"></div>
|
|
<div class="stripe" style="width:1200px;bottom:200px;right:-160px;background:#f5f0e8;transform:rotate(6deg)"></div>
|
|
<div class="num">14</div>
|
|
<div class="tag">the press</div>
|
|
<div style="position:relative;text-align:center;padding:0 80px">
|
|
<h1 class="big" id="s2-title" style="font-size:120px">PRESS SLOW</h1>
|
|
<p class="sub">half a degree an hour, fourteen minutes on cast iron</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s3" class="clip" data-start="19" data-duration="8" data-track-index="1">
|
|
<div class="bg"></div>
|
|
<div class="wave" style="width:640px;height:640px;right:-160px;top:-100px;border-color:#1a1a1a"></div>
|
|
<div class="num">27</div>
|
|
<div class="tag">the reveal</div>
|
|
<div style="position:relative;text-align:center;padding:0 80px">
|
|
<h1 class="big" id="s3-title" style="font-size:140px">COOL ON THE<br/>PRESS, NOT THE COUNTER</h1>
|
|
<p class="sub">heat memory is real — open the door too early and it twists</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s4" class="clip" data-start="27" data-duration="7" data-track-index="1">
|
|
<div class="bg"></div>
|
|
<div class="wave" style="width:760px;height:760px;left:-200px;bottom:-180px;border-color:#e9c46a"></div>
|
|
<div class="wave" style="width:420px;height:420px;right:-100px;top:-80px;border-color:#2a9d8f"></div>
|
|
<div class="num">34</div>
|
|
<div class="tag" style="border-color:#f5f0e8;color:#f5f0e8">the ride</div>
|
|
<div style="position:relative;text-align:center;padding:0 80px">
|
|
<h1 class="big" id="s4-title" style="font-size:120px">A WEEK ON<br/>FLORIDA CONCRETE</h1>
|
|
<p class="sub">survive the curb, and it's real</p>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// s1
|
|
tl.to("#s1", { opacity: 1, duration: 0.4, ease: "power1.out" }, 0.1);
|
|
tl.from("#s1 .num", { x: -40, opacity: 0, duration: 0.5 }, 0.3);
|
|
tl.from("#s1-title", { y: 40, opacity: 0, duration: 0.6, ease: "power3.out" }, 0.5);
|
|
tl.to("#s1 .wave", { scale: 1.08, duration: 5, ease: "sine.inOut" }, 1);
|
|
tl.to("#s1", { opacity: 0, duration: 0.3 }, 7.5);
|
|
|
|
// s2
|
|
tl.to("#s2", { opacity: 1, duration: 0.4 }, 8.2);
|
|
tl.from("#s2 .stripe", { x: -200, opacity: 0, duration: 0.7, stagger: 0.1 }, 8.4);
|
|
tl.from("#s2-title", { y: 40, opacity: 0, duration: 0.5 }, 8.8);
|
|
tl.to("#s2", { opacity: 0, duration: 0.3 }, 18.5);
|
|
|
|
// s3
|
|
tl.to("#s3", { opacity: 1, duration: 0.4 }, 19.2);
|
|
tl.from("#s3-title", { scale: 1.08, opacity: 0, duration: 0.6 }, 19.5);
|
|
tl.to("#s3 .wave", { rotate: 12, duration: 6, ease: "sine.inOut" }, 19.5);
|
|
tl.to("#s3", { opacity: 0, duration: 0.3 }, 26.5);
|
|
|
|
// s4
|
|
tl.to("#s4", { opacity: 1, duration: 0.4 }, 27.2);
|
|
tl.from("#s4-title", { y: 40, opacity: 0, duration: 0.5 }, 27.5);
|
|
tl.to("#s4 .wave", { rotate: -10, duration: 5, ease: "sine.inOut" }, 28);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |