91 lines
5.5 KiB
HTML
91 lines
5.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="Map the bottleneck before you touch the line."><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:#120d08;color:#f5e8d0;font-family:Georgia,'Times New Roman',serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#120d08}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.1)}
|
||
|
|
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,8,.55) 0%,rgba(18,13,8,.25) 45%,rgba(18,13,8,.78) 100%)}
|
||
|
|
.emberline{position:absolute;top:48%;height:2px;left:0;right:0;
|
||
|
|
background:linear-gradient(90deg,transparent,#e8894a,transparent);opacity:0}
|
||
|
|
.title{position:relative;text-align:center;max-width:1500px;padding:0 90px;opacity:0}
|
||
|
|
.title h1{font-size:108px;font-weight:400;letter-spacing:.02em;margin:0 0 20px;line-height:1.05}
|
||
|
|
.title p{font-size:46px;font-style:italic;color:#e8c9a3;margin:0;line-height:1.3}
|
||
|
|
.kicker{font-size:26px;letter-spacing:.42em;text-transform:uppercase;color:#e8894a;margin-bottom:26px}
|
||
|
|
.rule{width:120px;height:3px;background:#e8894a;margin:30px auto 0;opacity:0}
|
||
|
|
.big{font-size:132px;line-height:1.02}
|
||
|
|
.smoke{position:absolute;bottom:0;left:24%;width:900px;height:700px;opacity:.16;
|
||
|
|
background:radial-gradient(ellipse at center,rgba(240,220,190,.9),transparent 65%)}
|
||
|
|
</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="76">
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="18" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/13068565/pexels-photo-13068565.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="scrim"></div>
|
||
|
|
<div class="emberline"></div>
|
||
|
|
<div class="title">
|
||
|
|
<div class="kicker">From the mouth of the smoke</div>
|
||
|
|
<h1 id="s1-title">The Low & Slow Doctrine</h1>
|
||
|
|
<p>Patience is a structural material.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="s2" class="clip" data-start="18" data-duration="20" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/9397270/pexels-photo-9397270.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="scrim"></div>
|
||
|
|
<div class="smoke"></div>
|
||
|
|
<div class="title">
|
||
|
|
<h1 id="s2-title" class="big">Two-fifty<br/>sixteen hours</h1>
|
||
|
|
<p id="s2-p">The fire isn't the boss. Time is.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="s3" class="clip" data-start="38" data-duration="18" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/36700839/pexels-photo-36700839.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="scrim"></div>
|
||
|
|
<div class="title">
|
||
|
|
<h1 id="s3-title" class="big">Same trade</h1>
|
||
|
|
<p id="s3-p">Map the bottleneck before you touch the line.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="s4" class="clip" data-start="56" data-duration="20" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/37116047/pexels-photo-37116047.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="scrim"></div>
|
||
|
|
<div class="title">
|
||
|
|
<div class="kicker">Pass it on</div>
|
||
|
|
<h1 id="s4-title">Low & slow<br/>turns tough into tender</h1>
|
||
|
|
<p id="s4-p">— Rony Thomas, La Grange, Kentucky</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="18"></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.14"></audio>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
// Scene 1
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.6);
|
||
|
|
gsap.set(".emberline", { opacity: 0 });
|
||
|
|
tl.to(".emberline", { opacity: 1, duration: 1.2, ease: "sine.out" }, 1.0);
|
||
|
|
tl.from("#s1-title", { opacity: 0, y: 30, duration: 0.8 }, 0.6);
|
||
|
|
tl.to(".kicker", { opacity: 1, duration: 0.7 }, 1.0);
|
||
|
|
tl.to(".rule", { opacity: 1, scaleX: 1, duration: 0.6 }, 2.0);
|
||
|
|
// Scene 2
|
||
|
|
tl.fromTo("#s2-title", { scale: 1.08, opacity: 0 }, { scale: 1, opacity: 1, duration: 1.4, ease: "power1.out" }, 18.8);
|
||
|
|
tl.fromTo("#s2-p", { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.9 }, 20.2);
|
||
|
|
tl.to(".smoke", { opacity: 0.28, duration: 8, ease: "sine.inOut" }, 19);
|
||
|
|
// Scene 3
|
||
|
|
tl.fromTo("#s3-title", { x: -40, opacity: 0 }, { x: 0, opacity: 1, duration: 0.9, ease: "power3.out" }, 39);
|
||
|
|
tl.fromTo("#s3-p", { opacity: 0 }, { opacity: 1, duration: 0.8 }, 41);
|
||
|
|
// Scene 4
|
||
|
|
tl.fromTo("#s4-title", { scale: 1.06, opacity: 0 }, { scale: 1, opacity: 1, duration: 1.2, ease: "power1.out" }, 57);
|
||
|
|
tl.fromTo("#s4-p", { opacity: 0, y: 14 }, { opacity: 1, y: 0, duration: 0.8 }, 59);
|
||
|
|
tl.to("#s4-title", { scale: 1.02, duration: 6, ease: "sine.out" }, 60);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|