194 lines
11 KiB
HTML
194 lines
11 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:#0b0a08;color:#f3e5cf;font-family:Georgia,'Times New Roman',serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:
|
||
|
|
radial-gradient(1200px 700px at 50% 78%, #2b1608 0%, #161009 55%, #0b0a08 100%)}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.grain{position:absolute;inset:0;background:
|
||
|
|
repeating-linear-gradient(0deg, rgba(243,229,207,.02) 0 2px, transparent 2px 5px)}
|
||
|
|
/* ---------- shared drifting smoke ---------- */
|
||
|
|
.smoke{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;
|
||
|
|
background:radial-gradient(circle at 50% 50%, rgba(150,110,70,.5), transparent 62%)}
|
||
|
|
.warm{color:#f3e5cf;text-shadow:0 0 34px rgba(255,140,40,.32),0 2px 0 rgba(0,0,0,.5)}
|
||
|
|
.kicker{font-size:30px;letter-spacing:.42em;text-transform:uppercase;opacity:.6}
|
||
|
|
h1{font-size:118px;font-weight:400;line-height:1.06;margin:22px 0 0;max-width:1400px;text-align:center}
|
||
|
|
.sub{font-size:40px;opacity:.82;margin-top:26px;text-align:center;max-width:1200px}
|
||
|
|
.center{text-align:center}
|
||
|
|
/* ---------- smoker silhouette (s1) ---------- */
|
||
|
|
.smoker{position:relative;width:640px;height:430px}
|
||
|
|
.barrel{position:absolute;left:40px;top:120px;width:470px;height:210px;border-radius:110px;
|
||
|
|
background:linear-gradient(180deg,#241812,#171009);border:3px solid #5a3a24;
|
||
|
|
box-shadow:inset 0 -28px 60px rgba(0,0,0,.7)}
|
||
|
|
.firebox{position:absolute;left:24px;top:190px;width:250px;height:150px;border-radius:14px;
|
||
|
|
background:#171009;border:3px solid #5a3a24}
|
||
|
|
.door{position:absolute;left:52px;top:214px;width:150px;height:100px;border-radius:10px;
|
||
|
|
background:radial-gradient(circle at 50% 60%, #ff7a1e 0%, #c23a08 45%, #2a1206 100%);opacity:.9}
|
||
|
|
.stack{position:absolute;left:60px;top:52px;width:30px;height:80px;border-radius:6px;background:#20150e;border:2px solid #5a3a24}
|
||
|
|
.ticker{position:absolute;right:30px;top:70px;width:150px;height:150px;border-radius:50%;
|
||
|
|
border:3px solid rgba(243,229,207,.5)}
|
||
|
|
.hand{position:absolute;left:50%;top:50%;width:3px;height:58px;background:#f3e5cf;
|
||
|
|
transform-origin:50% 0%}
|
||
|
|
/* ---------- four quarters (s2) ---------- */
|
||
|
|
.court{position:relative;width:1500px;height:820px;display:grid;
|
||
|
|
grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:10px}
|
||
|
|
.quarter{position:relative;border-radius:18px;overflow:hidden;
|
||
|
|
display:grid;place-items:center;border:2px solid transparent}
|
||
|
|
.q1{background:radial-gradient(circle at 50% 70%,#311409,#150c06);border-color:#8a4a20}
|
||
|
|
.q2{background:radial-gradient(circle at 50% 70%,#3a0f1c,#170a0d);border-color:#a03030}
|
||
|
|
.q3{background:radial-gradient(circle at 50% 70%,#0f1a28,#0a0e16);border-color:#2a5a80}
|
||
|
|
.q4{background:radial-gradient(circle at 50% 70%,#1c0f2a,#0e0a13);border-color:#7a4a90}
|
||
|
|
.qnum{font-size:170px;font-weight:700;opacity:.85;text-shadow:0 0 44px rgba(0,0,0,.6)}
|
||
|
|
/* ---------- the bark (s3) ---------- */
|
||
|
|
.slab{position:relative;width:1500px;height:640px}
|
||
|
|
.meat{position:absolute;left:120px;top:120px;width:1280px;height:380px;border-radius:220px;
|
||
|
|
background:linear-gradient(180deg,#170c06,#2b1508 40%,#3a1d0a 70%,#24120a);
|
||
|
|
box-shadow:0 30px 80px rgba(0,0,0,.8),inset 0 -40px 70px rgba(0,0,0,.7)}
|
||
|
|
.bark{position:absolute;left:120px;top:100px;width:1280px;height:180px;border-radius:220px 220px 60px 60px;
|
||
|
|
background:radial-gradient(ellipse at 50% -30%, #241008 0%, #0c0704 100%);opacity:.95}
|
||
|
|
.probe{position:absolute;left:360px;top:240px;width:520px;height:10px;border-radius:6px;
|
||
|
|
background:linear-gradient(90deg,#c9b89a,#8a7a60);transform:rotate(-16deg);box-shadow:0 0 18px rgba(243,229,207,.5)}
|
||
|
|
.temp{position:absolute;right:180px;top:90px;font-size:150px;opacity:.92}
|
||
|
|
/* ---------- stance (s4) ---------- */
|
||
|
|
.stance{position:relative;width:1500px;height:760px}
|
||
|
|
.leg{position:absolute;background:#1e1510;border:2px solid #4a3520;border-radius:60px}
|
||
|
|
.l1{left:560px;bottom:120px;width:130px;height:470px;transform:rotate(6deg)}
|
||
|
|
.l2{left:760px;bottom:110px;width:130px;height:470px;transform:rotate(-8deg)}
|
||
|
|
.body{position:absolute;left:645px;bottom:360px;width:230px;height:300px;border-radius:120px 120px 40px 40px;
|
||
|
|
background:#241a12;border:2px solid #4a3520}
|
||
|
|
.arm{position:absolute;background:#201710;border:2px solid #4a3520;border-radius:40px;height:60px}
|
||
|
|
.a1{left:590px;bottom:540px;width:300px;transform:rotate(-24deg)}
|
||
|
|
.a2{left:620px;bottom:560px;width:280px;transform:rotate(14deg)}
|
||
|
|
.ball{position:absolute;left:250px;bottom:180px;width:120px;height:120px;border-radius:50%;
|
||
|
|
background:radial-gradient(circle at 35% 35%,#c9783a,#7a3d16);box-shadow:0 18px 40px rgba(0,0,0,.6)}
|
||
|
|
.ball::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;
|
||
|
|
background:rgba(20,10,4,.7);transform:rotate(18deg)}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="55">
|
||
|
|
|
||
|
|
<!-- ============ scene 1 : the smoke won't be rushed (0-14) ============ -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="14" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="center">
|
||
|
|
<div class="kicker warm">225 degrees · low & slow</div>
|
||
|
|
<div class="smoker">
|
||
|
|
<div class="stack"></div>
|
||
|
|
<div class="barrel"></div>
|
||
|
|
<div class="firebox"></div>
|
||
|
|
<div class="door"></div>
|
||
|
|
<div class="ticker"><div class="hand" id="minute-hand"></div></div>
|
||
|
|
<div class="smoke" style="left:-40px;top:-120px;width:380px;height:380px"></div>
|
||
|
|
<div class="smoke" style="left:120px;top:-180px;width:460px;height:460px"></div>
|
||
|
|
<div class="smoke" style="left:320px;top:-110px;width:360px;height:360px"></div>
|
||
|
|
</div>
|
||
|
|
<h1 class="warm">Some things won't be rushed.</h1>
|
||
|
|
<div class="sub">Not the brisket. Not the kid.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ============ scene 2 : four quarters (14-28) ============ -->
|
||
|
|
<section id="s2" class="clip" data-start="14" data-duration="14" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="center">
|
||
|
|
<div class="kicker warm">basketball · the clock</div>
|
||
|
|
<div class="court">
|
||
|
|
<div class="quarter q1"><span class="qnum warm">1</span></div>
|
||
|
|
<div class="quarter q2"><span class="qnum warm">2</span></div>
|
||
|
|
<div class="quarter q3"><span class="qnum warm">3</span></div>
|
||
|
|
<div class="quarter q4"><span class="qnum warm">4</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="sub">Each quarter its own fire. You build a win bark by bark.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ============ scene 3 : the bark (28-41) ============ -->
|
||
|
|
<section id="s3" class="clip" data-start="28" data-duration="13" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="center">
|
||
|
|
<div class="kicker warm">patience with a crust on it</div>
|
||
|
|
<div class="slab">
|
||
|
|
<div class="bark"></div>
|
||
|
|
<div class="meat"></div>
|
||
|
|
<div class="probe"></div>
|
||
|
|
<div class="temp warm">202°</div>
|
||
|
|
<div class="smoke" style="left:-80px;top:-140px;width:420px;height:420px;opacity:.35"></div>
|
||
|
|
</div>
|
||
|
|
<div class="sub">Till the probe slides in like butter.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ============ scene 4 : the kid walks out tough (41-55) ============ -->
|
||
|
|
<section id="s4" class="clip" data-start="41" data-duration="14" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="center">
|
||
|
|
<div class="kicker warm">coach's corner · process over voice</div>
|
||
|
|
<div class="stance">
|
||
|
|
<div class="ball"></div>
|
||
|
|
<div class="arm a1"></div>
|
||
|
|
<div class="arm a2"></div>
|
||
|
|
<div class="body"></div>
|
||
|
|
<div class="leg l1"></div>
|
||
|
|
<div class="leg l2"></div>
|
||
|
|
<div class="smoke" style="right:-60px;top:80px;width:500px;height:500px;opacity:.3"></div>
|
||
|
|
<div class="smoke" style="right:140px;top:-60px;width:340px;height:340px;opacity:.25"></div>
|
||
|
|
</div>
|
||
|
|
<h1 class="warm">Trust the process.</h1>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- narration audio, direct children of root -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="14"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="28"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="41"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.16"></audio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// s1 entrance + drifting smoke + slow clock hand
|
||
|
|
tl.from("#s1 .kicker", { opacity: 0, y: 30, duration: 1.4 }, 0.4);
|
||
|
|
tl.from("#s1 .barrel", { opacity: 0, y: 40, duration: 1.6 }, 0.8);
|
||
|
|
tl.from("#s1 .firebox", { opacity: 0, duration: 1.2 }, 1.6);
|
||
|
|
tl.from("#s1 .door", { scale: 0.6, opacity: 0, duration: 1.4 }, 2.0);
|
||
|
|
tl.to("#s1 h1", { opacity: 0, y: -30, duration: 0.8 }, 12.4);
|
||
|
|
tl.to("#s1 .sub", { opacity: 0, y: -30, duration: 0.8 }, 12.8);
|
||
|
|
tl.to("#s1 .smoker", { opacity: 0, duration: 1.6 }, 12.2);
|
||
|
|
tl.to("#minute-hand", { rotation: 60, duration: 14, ease: "none" }, 0.5);
|
||
|
|
|
||
|
|
// s2 quarters lighting up sequentially
|
||
|
|
tl.from("#s2 .kicker", { opacity: 0, y: 30, duration: 1.2 }, 14.4);
|
||
|
|
tl.from("#s2 .q1", { opacity: 0, scale: 0.9, duration: 1 }, 15.0);
|
||
|
|
tl.from("#s2 .q2", { opacity: 0, scale: 0.9, duration: 1 }, 17.4);
|
||
|
|
tl.from("#s2 .q3", { opacity: 0, scale: 0.9, duration: 1 }, 19.8);
|
||
|
|
tl.from("#s2 .q4", { opacity: 0, scale: 0.9, duration: 1 }, 22.2);
|
||
|
|
tl.from("#s2 .sub", { opacity: 0, y: 26, duration: 1.2 }, 25.0);
|
||
|
|
tl.to("#s2 .court", { opacity: 0, duration: 1.6 }, 26.4);
|
||
|
|
|
||
|
|
// s3 the slab, probe slides in
|
||
|
|
tl.from("#s3 .kicker", { opacity: 0, y: 30, duration: 1.2 }, 28.4);
|
||
|
|
tl.from("#s3 .bark", { opacity: 0, y: -30, duration: 1.8 }, 29.0);
|
||
|
|
tl.from("#s3 .meat", { opacity: 0, y: 30, duration: 1.8 }, 29.4);
|
||
|
|
tl.from("#s3 .probe", { opacity: 0, x: -420, duration: 2.2, ease: "power2.out" }, 31.5);
|
||
|
|
tl.from("#s3 .temp", { opacity: 0, scale: 0.7, duration: 1.4 }, 33.5);
|
||
|
|
tl.from("#s3 .sub", { opacity: 0, y: 24, duration: 1.2 }, 37.5);
|
||
|
|
tl.to("#s3 .slab", { opacity: 0, duration: 1.6 }, 39.4);
|
||
|
|
|
||
|
|
// s4 stance assembling, then hold on the title
|
||
|
|
tl.from("#s4 .kicker", { opacity: 0, y: 30, duration: 1.2 }, 41.4);
|
||
|
|
tl.from("#s4 .l1", { opacity: 0, y: 60, duration: 1 }, 42.0);
|
||
|
|
tl.from("#s4 .l2", { opacity: 0, y: 60, duration: 1 }, 42.4);
|
||
|
|
tl.from("#s4 .body", { opacity: 0, y: 40, duration: 1.2 }, 42.8);
|
||
|
|
tl.from("#s4 .a1", { opacity: 0, duration: 1 }, 43.4);
|
||
|
|
tl.from("#s4 .a2", { opacity: 0, duration: 1 }, 43.8);
|
||
|
|
tl.from("#s4 .ball", { opacity: 0, scale: 0.4, x: 400, duration: 1.6, ease: "back.out(1.6)" }, 44.2);
|
||
|
|
tl.from("#s4 h1", { opacity: 0, scale: 1.08, duration: 1.6, ease: "power3.out" }, 47.5);
|
||
|
|
tl.to("#s4", { opacity: 0, duration: 1.8 }, 53.0);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|