155 lines
8.8 KiB
HTML
155 lines
8.8 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>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Libre+Baskerville:ital@0;1&display=swap');
|
||
|
|
body{margin:0;background:#100c08;color:#e8dcc0;font-family:'IBM Plex Mono',monospace}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:
|
||
|
|
radial-gradient(1200px 700px at 20% 10%, #221812 0%, #100c08 60%)}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
|
||
|
|
/* ---- section chrome ---- */
|
||
|
|
.grain{position:absolute;inset:0;pointer-events:none;
|
||
|
|
background:
|
||
|
|
repeating-linear-gradient(0deg, rgba(232,220,192,.03) 0 1px, transparent 1px 3px),
|
||
|
|
repeating-linear-gradient(90deg, rgba(232,220,192,.02) 0 1px, transparent 1px 4px)}
|
||
|
|
.rule{position:absolute;left:80px;right:80px;height:2px;background:#8c5a2b;opacity:.7}
|
||
|
|
.rule-top{top:90px}.rule-bot{bottom:90px}
|
||
|
|
.tag{position:absolute;top:52px;left:84px;letter-spacing:.35em;font-size:26px;color:#c99a5a}
|
||
|
|
.case-no{position:absolute;top:52px;right:84px;letter-spacing:.2em;font-size:24px;color:#6f5a3a}
|
||
|
|
.foot{position:absolute;bottom:58px;left:84px;right:84px;font-size:24px;letter-spacing:.15em;color:#6f5a3a}
|
||
|
|
.card{position:relative;width:1500px;min-height:600px;border:2px solid #c99a5a;background:
|
||
|
|
repeating-linear-gradient(45deg, rgba(201,154,90,.05) 0 18px, transparent 18px 36px),
|
||
|
|
rgba(16,12,8,.65);padding:70px 80px;box-shadow:0 0 90px rgba(201,154,90,.12)}
|
||
|
|
h1{font-family:'Libre Baskerville',serif;font-weight:400;font-size:88px;line-height:1.06;margin:0 0 30px;color:#f4e8c8}
|
||
|
|
h1 em{font-style:italic;color:#c99a5a}
|
||
|
|
.caption{font-size:34px;line-height:1.55;color:#e0cd9f;font-family:'Libre Baskerville',serif}
|
||
|
|
/* s2 diagram */
|
||
|
|
.wall{position:relative;width:760px;height:460px;background:linear-gradient(180deg,#2a2118,#1a1410);
|
||
|
|
border:3px solid #5b4630;box-shadow:inset 0 0 60px rgba(0,0,0,.6)}
|
||
|
|
.flameV{position:absolute;bottom:0;left:300px;width:160px;height:320px;
|
||
|
|
background:linear-gradient(180deg,#c99a5a00 0%,#8c5a2b 55%,#3b2a18 100%);
|
||
|
|
clip-path:polygon(50% 0,100% 100%,0 100%)}
|
||
|
|
.flameV2{position:absolute;bottom:0;left:120px;width:90px;height:190px;
|
||
|
|
background:linear-gradient(180deg,#c99a5a00 0%,#a06a35 60%,#2c1f12 100%);
|
||
|
|
clip-path:polygon(50% 0,100% 100%,0 100%)}
|
||
|
|
.spall{position:absolute;top:170px;left:150px;width:64px;height:52px;border-radius:50%;
|
||
|
|
background:#d6b077;opacity:.38;filter:blur(2px)}
|
||
|
|
.arrow{position:absolute;color:#c99a5a;font-size:30px;font-weight:600}
|
||
|
|
.lab{position:absolute;font-size:26px;letter-spacing:.18em;color:#c99a5a}
|
||
|
|
/* s3 sharp vs wide */
|
||
|
|
.diag{display:flex;gap:90px;align-items:flex-end}
|
||
|
|
.vsharp{width:140px;height:360px;background:linear-gradient(180deg,#c99a5a00,#8c5a2b 60%,#2c1f12);
|
||
|
|
clip-path:polygon(50% 0,100% 100%,0 100%)}
|
||
|
|
.vwide{width:320px;height:300px;background:linear-gradient(180deg,#c99a5a00,#a06a35 70%,#2c1f12);
|
||
|
|
clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
|
||
|
|
.dropline{position:absolute;bottom:250px;left:0;width:100%;height:2px;background:#6f5a3a;opacity:.6}
|
||
|
|
.lbl{font-size:26px;letter-spacing:.2em;color:#e0cd9f;text-align:center;margin-top:26px}
|
||
|
|
.cursor{position:absolute;width:34px;height:34px;border:3px solid #c99a5a;border-radius:50%}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="72">
|
||
|
|
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="16"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="37"></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>
|
||
|
|
|
||
|
|
<!-- -------- SCENE 1 : the signature -------- -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="16" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="rule rule-top"></div><div class="rule rule-bot"></div>
|
||
|
|
<div class="tag">CLAIMS · FIRE ORIGIN</div><div class="case-no">FILE № 41-BURN-88</div>
|
||
|
|
<div class="card">
|
||
|
|
<h1>The burn leaves a<br/>signature on <em>everything</em> it touches.</h1>
|
||
|
|
<div class="caption" id="cap1">Every char a sentence. Every crack a punctuation mark.</div>
|
||
|
|
</div>
|
||
|
|
<div class="foot">STANDARD METHOD FOR FIRE INVESTIGATION · FIELD NOTES</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- -------- SCENE 2 : the discipline -------- -->
|
||
|
|
<section id="s2" class="clip" data-start="16" data-duration="21" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="rule rule-top"></div><div class="rule rule-bot"></div>
|
||
|
|
<div class="tag">READING THE ROOM</div><div class="case-no">LEAST BURNED → MOST</div>
|
||
|
|
<div class="card">
|
||
|
|
<h1>Origin <em>first.</em> Cause second.</h1>
|
||
|
|
<div id="wallbox" class="wall">
|
||
|
|
<div class="flameV"></div><div class="flameV2"></div><div class="spall"></div>
|
||
|
|
<div class="lab" id="plab" style="top:30px;left:330px">V-PATTERN</div>
|
||
|
|
<div class="arrow" id="parrow" style="top:150px;left:20px">↑</div>
|
||
|
|
<div class="lab" id="spallab" style="top:230px;left:16px">SPALL</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="foot">DEEP CHAR · V-PATTERN · CONCRETE SPALLING — EVIDENCE WAITS</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- -------- SCENE 3 : the tell -------- -->
|
||
|
|
<section id="s3" class="clip" data-start="37" data-duration="19" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="rule rule-top"></div><div class="rule rule-bot"></div>
|
||
|
|
<div class="tag">THE TELL</div><div class="case-no">FAST & HOT vs. LOW & SLOW</div>
|
||
|
|
<div class="card">
|
||
|
|
<h1>The pattern <em>is</em> the tell.</h1>
|
||
|
|
<div id="diag" class="diag">
|
||
|
|
<div style="position:relative">
|
||
|
|
<div class="vsharp"></div>
|
||
|
|
<div class="lbl">SHARP V — FAST, HOT</div>
|
||
|
|
</div>
|
||
|
|
<div style="position:relative">
|
||
|
|
<div class="vwide"></div>
|
||
|
|
<div class="lbl">WIDE — LOW, SLOW</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="foot">LET THE FEAR OF JUDGING TOO SOON COOL YOUR FIRST READ</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- -------- SCENE 4 : listening -------- -->
|
||
|
|
<section id="s4" class="clip" data-start="56" data-duration="16" data-track-index="1">
|
||
|
|
<div class="grain"></div>
|
||
|
|
<div class="rule rule-top"></div><div class="rule rule-bot"></div>
|
||
|
|
<div class="tag">SETTLEMENT</div><div class="case-no">CLOSED WITH CARE</div>
|
||
|
|
<div class="card">
|
||
|
|
<h1>The evidence never lies.<br/>It only <em>waits.</em></h1>
|
||
|
|
<div class="caption" id="cap4">Same patience a gardener keeps — walk the rows, let the soil tell the story.</div>
|
||
|
|
</div>
|
||
|
|
<div class="foot">AMY TUCKER · SENIOR CLAIMS ADJUSTER · WILMINGTON, DE</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// scene 1
|
||
|
|
tl.to("#s1", { opacity: 1, duration: 0.8 }, 0.3);
|
||
|
|
tl.from("#s1 .card h1", { opacity: 0, y: 30, duration: 1.1, ease: "power3.out" }, 0.9);
|
||
|
|
tl.from("#cap1", { opacity: 0, letterSpacing: "0em", duration: 0.9 }, 2.0);
|
||
|
|
tl.to("#s1", { opacity: 0, duration: 0.7 }, 15.2);
|
||
|
|
|
||
|
|
// scene 2 — let the wall draw itself: V patterns grow from the floor
|
||
|
|
tl.to("#s2", { opacity: 1, duration: 0.8 }, 16.4);
|
||
|
|
tl.from(".flameV", { scaleY: 0, transformOrigin: "50% 100%", duration: 1.6, ease: "power2.out" }, 17.4);
|
||
|
|
tl.from(".flameV2", { scaleY: 0, transformOrigin: "50% 100%", duration: 1.4, ease: "power2.out" }, 18.2);
|
||
|
|
tl.from("#plab", { opacity: 0, x: -16, duration: 0.7 }, 19.2);
|
||
|
|
tl.from("#parrow", { opacity: 0, y: -14, duration: 0.7, repeat: 2, yoyo: true }, 19.8);
|
||
|
|
tl.from(".spall", { opacity: 0, scale: 0.4, transformOrigin: "50% 50%", duration: 0.9 }, 20.6);
|
||
|
|
tl.from("#spallab", { opacity: 0, x: -12, duration: 0.6 }, 21.4);
|
||
|
|
tl.to("#s2", { opacity: 0, duration: 0.7 }, 36.2);
|
||
|
|
|
||
|
|
// scene 3 — sharp and wide Vs rise against each other
|
||
|
|
tl.to("#s3", { opacity: 1, duration: 0.8 }, 37.4);
|
||
|
|
tl.from(".vsharp", { scaleY: 0, transformOrigin: "50% 100%", duration: 1.2, ease: "power2.out" }, 38.3);
|
||
|
|
tl.from(".vwide", { scaleY: 0, transformOrigin: "50% 100%", duration: 1.5, ease: "power2.out" }, 39.0);
|
||
|
|
tl.from("#s3 .lbl", { opacity: 0, y: 14, duration: 0.6, stagger: 0.3 }, 40.4);
|
||
|
|
tl.to("#s3", { opacity: 0, duration: 0.7 }, 55.2);
|
||
|
|
|
||
|
|
// scene 4 — closing, steady like a settled claim
|
||
|
|
tl.to("#s4", { opacity: 1, duration: 0.9 }, 56.4);
|
||
|
|
tl.from("#s4 .card h1", { opacity: 0, y: 28, duration: 1.1, ease: "power3.out" }, 57.2);
|
||
|
|
tl.from("#cap4", { opacity: 0, letterSpacing: "0em", duration: 0.9 }, 58.4);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|