111 lines
6.0 KiB
HTML
111 lines
6.0 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:#fff;font-family:Inter,system-ui,sans-serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0b0f14}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.bg{position:absolute;inset:0}
|
||
|
|
/* shared text */
|
||
|
|
.bar{font-family:'Courier New',monospace;letter-spacing:.08em}
|
||
|
|
/* scene 4: common for bg base */
|
||
|
|
.gear-line{position:absolute;height:1px;background:#3a2f22;left:0;right:0}
|
||
|
|
.amber{color:#e8a33d}
|
||
|
|
.steel{color:#b9c0c7}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="80">
|
||
|
|
|
||
|
|
<!-- background fixtures across all scenes: garage frame -->
|
||
|
|
<div class="bg" style="background:
|
||
|
|
linear-gradient(#0b0f14,#0b0f14 60%,#120f0a 100%);">
|
||
|
|
<div class="gear-line" style="top:120px;background:#241e15"></div>
|
||
|
|
<div class="gear-line" style="top:140px;background:#1a150e"></div>
|
||
|
|
<div class="gear-line" style="bottom:200px;background:#241e15"></div>
|
||
|
|
<div class="gear-line" style="bottom:180px;background:#1a150e"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- S1: frozen block, faint Georgia badge silhouette -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="24" data-track-index="1">
|
||
|
|
<div style="position:relative;text-align:center">
|
||
|
|
<div id="s1-badge" style="font-family:'Courier New',monospace;font-size:64px;letter-spacing:.2em;color:#2c323a">IMPALA</div>
|
||
|
|
<div id="s1-sub" style="font-family:'Courier New',monospace;font-size:26px;letter-spacing:.14em;color:#8a8f96;margin-top:26px">1965 · TWO-DOOR · 409cu IN</div>
|
||
|
|
<div id="s1-line" style="width:260px;height:3px;background:#e8a33d;margin:40px auto 0"></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S2: the brake drum / hazard red band scene -->
|
||
|
|
<section id="s2" class="clip" data-start="24" data-duration="18" data-track-index="1">
|
||
|
|
<div style="position:relative;text-align:center">
|
||
|
|
<svg width="520" height="240" viewBox="0 0 520 240">
|
||
|
|
<circle cx="160" cy="120" r="90" fill="none" stroke="#3a414a" stroke-width="10"/>
|
||
|
|
<circle cx="160" cy="120" r="66" fill="none" stroke="#2a3036" stroke-width="4"/>
|
||
|
|
<circle cx="160" cy="120" r="12" fill="#e8a33d"/>
|
||
|
|
<!-- red hazard band -->
|
||
|
|
<rect x="300" y="70" width="170" height="14" rx="7" fill="#c0392b"/>
|
||
|
|
<rect x="300" y="120" width="170" height="14" rx="7" fill="#c0392b"/>
|
||
|
|
<rect x="300" y="170" width="170" height="14" rx="7" fill="#c0392b"/>
|
||
|
|
<text x="300" y="58" fill="#c0473b" font-family="'Courier New',monospace" font-size="18" letter-spacing="4">LIVE · MARKED</text>
|
||
|
|
</svg>
|
||
|
|
<div id="s2-cap" class="bar" style="font-size:30px;color:#b9c0c7;letter-spacing:.14em;margin-top:24px">LISTEN, THEN MARK THE HAZARD</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S3: the master alarm / gauge scene -->
|
||
|
|
<section id="s3" class="clip" data-start="42" data-duration="20" data-track-index="1">
|
||
|
|
<div style="position:relative;text-align:center">
|
||
|
|
<svg width="560" height="260" viewBox="0 0 560 260">
|
||
|
|
<!-- gauge -->
|
||
|
|
<circle cx="200" cy="130" r="96" fill="#10141a" stroke="#3a414a" stroke-width="8"/>
|
||
|
|
<path d="M 130 130 A 70 70 0 0 1 250 130" fill="none" stroke="#e8a33d" stroke-width="6" stroke-linecap="round"/>
|
||
|
|
<line x1="200" y1="130" x2="178" y2="78" stroke="#b9c0c7" stroke-width="4" stroke-linecap="round"/>
|
||
|
|
<circle cx="200" cy="130" r="8" fill="#b9c0c7"/>
|
||
|
|
<!-- alarm ticker column -->
|
||
|
|
<rect x="360" y="60" width="140" height="14" rx="3" fill="#c0392b"/>
|
||
|
|
<rect x="360" y="92" width="140" height="14" rx="3" fill="#3a414a"/>
|
||
|
|
<rect x="360" y="124" width="98" height="14" rx="3" fill="#3a414a"/>
|
||
|
|
<text x="360" y="50" fill="#c0473b" font-family="'Courier New',monospace" font-size="17" letter-spacing="3">1201</text>
|
||
|
|
<text x="360" y="170" fill="#8a8f96" font-family="'Courier New',monospace" font-size="16" letter-spacing="2">LEGIBLE AT A GLANCE</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S4: ignition, the settle -->
|
||
|
|
<section id="s4" class="clip" data-start="62" data-duration="18" data-track-index="1">
|
||
|
|
<div style="position:relative;text-align:center">
|
||
|
|
<div id="s4-hum" style="font-family:'Courier New',monospace;font-size:38px;letter-spacing:.16em;color:#e8a33d">THE TURN OF THE KEY</div>
|
||
|
|
<div id="s4-sub" class="bar" style="font-size:26px;letter-spacing:.12em;color:#b9c0c7;margin-top:34px;max-width:1000px;line-height:1.5">THE THIRD TURN · A SETTLE · NOT A ROAR</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="24"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="42"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="62"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// S1
|
||
|
|
tl.from("#s1-badge", { opacity: 0, y: 30, duration: 1.2, ease: "power3.out" }, 0.6);
|
||
|
|
tl.from("#s1-sub", { opacity: 0, y: 18, duration: 0.9, ease: "power1.out" }, 2.3);
|
||
|
|
tl.from("#s1-line", { scaleX: 0, duration: 0.8, ease: "power1.out" }, 3.2);
|
||
|
|
tl.to("#s1-sub", { opacity: 0.25, duration: 1.2, ease: "power1.out" }, 20);
|
||
|
|
|
||
|
|
// S2
|
||
|
|
tl.from("#s2-cap", { opacity: 0, y: 16, duration: 0.8 }, 24.6);
|
||
|
|
tl.to("#s2-cap", { opacity: 0.25, duration: 1.0 }, 40);
|
||
|
|
|
||
|
|
// S3
|
||
|
|
tl.from("#s3 svg", { opacity: 0, scale: 1.04, duration: 1.0, ease: "power1.out" }, 42.4);
|
||
|
|
|
||
|
|
// S4
|
||
|
|
tl.from("#s4-hum", { opacity: 0, filter: "blur(6px)", scale: 1.02, duration: 1.4, ease: "power2.out" }, 63);
|
||
|
|
tl.from("#s4-sub", { opacity: 0, y: 16, duration: 0.9, ease: "power1.out" }, 65);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|