133 lines
6.7 KiB
HTML
133 lines
6.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="Pre-Trip · 05:47 The Walkaround Bridgeport, Connecticut — before the first bell psi 78 · OK DANGER ZONE STOP log signed · 06:02 · run clear"><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:#e8e4d8;font-family:"Georgia",serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0d1117}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.bg{position:absolute;inset:0}
|
||
|
|
|
||
|
|
/* watercolor paper texture via layered gradients */
|
||
|
|
.paper{background:
|
||
|
|
radial-gradient(circle at 20% 15%, rgba(140,120,80,0.10), transparent 60%),
|
||
|
|
radial-gradient(circle at 80% 70%, rgba(90,110,130,0.08), transparent 55%),
|
||
|
|
linear-gradient(165deg,#151922,#0d1117 60%,#10141c)}
|
||
|
|
|
||
|
|
.frame{border:1px solid rgba(200,190,160,0.35);padding:70px 90px;
|
||
|
|
background:rgba(16,20,28,0.72);box-shadow:0 0 90px rgba(0,0,0,0.6)}
|
||
|
|
h1{font-size:74px;font-weight:normal;letter-spacing:2px;margin:0}
|
||
|
|
.kicker{font-family:"Courier New",monospace;font-size:26px;letter-spacing:6px;
|
||
|
|
color:#c9a24a;text-transform:uppercase;margin-bottom:20px}
|
||
|
|
.num{font-family:"Courier New",monospace;color:#5a6b7a;font-size:24px;margin-top:34px}
|
||
|
|
|
||
|
|
/* schematic danger zone */
|
||
|
|
.zone{position:relative;width:900px;height:520px}
|
||
|
|
.bus{position:absolute;left:280px;top:180px;width:340px;height:150px;
|
||
|
|
background:linear-gradient(180deg,#d9a441,#b07c22);
|
||
|
|
border:3px solid #8a6018;border-radius:18px;z-index:3}
|
||
|
|
.bus:before{content:"";position:absolute;left:-46px;top:18px;width:46px;height:114px;
|
||
|
|
background:linear-gradient(90deg,#c08a2a,#8a6018);border-radius:10px 0 0 10px}
|
||
|
|
.bus:after{content:"";position:absolute;left:-52px;top:44px;width:58px;height:34px;
|
||
|
|
background:#2e3b18;border-radius:6px}
|
||
|
|
.dz{position:absolute;border:2px dashed #c94f3d;border-radius:60% 50% 55% 45%;
|
||
|
|
opacity:0.55;z-index:2}
|
||
|
|
.dz1{width:820px;height:300px;left:40px;top:90px}
|
||
|
|
.dz2{width:560px;height:180px;left:170px;top:150px}
|
||
|
|
.yield{position:absolute;left:70px;top:60px;font-family:"Courier New",monospace;
|
||
|
|
color:#c94f3d;font-size:22px;letter-spacing:3px;z-index:4}
|
||
|
|
.gauge{position:relative;width:420px;height:420px}
|
||
|
|
.gauge svg{width:420px;height:420px}
|
||
|
|
.dot{position:absolute;width:34px;height:34px;background:#c9a24a;border-radius:50%;z-index:5}
|
||
|
|
|
||
|
|
.tire{position:relative;width:520px;height:520px}
|
||
|
|
.ring{position:absolute;border:20px solid #1b2129;border-radius:50%;
|
||
|
|
left:110px;top:110px;width:280px;height:280px;background:#05070a}
|
||
|
|
.ring:before{content:"";position:absolute;inset:-20px;border-radius:50%;
|
||
|
|
border:3px solid rgba(200,190,160,0.4)}
|
||
|
|
.crack{position:absolute;left:60px;top:250px;width:120px;height:3px;
|
||
|
|
background:#c94f3d;transform:rotate(-28deg)}
|
||
|
|
.press{font-family:"Courier New",monospace;color:#7ed0a0;font-size:26px;
|
||
|
|
position:absolute;right:0;bottom:0}
|
||
|
|
|
||
|
|
.stoparm{position:relative;width:700px;height:400px}
|
||
|
|
.arm{position:absolute;right:140px;top:20px;width:210px;height:70px;
|
||
|
|
background:#c94f3d;border:3px solid #8a1f12;border-radius:8px;
|
||
|
|
display:grid;place-items:center;color:#fff;font-family:"Courier New",monospace;
|
||
|
|
font-size:30px;letter-spacing:4px;transform-origin:left center}
|
||
|
|
</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="60">
|
||
|
|
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="14" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="frame" style="text-align:center">
|
||
|
|
<div class="kicker">Pre-Trip · 05:47</div>
|
||
|
|
<h1>The Walkaround</h1>
|
||
|
|
<div style="font-family:'Courier New',monospace;color:#8f9aa8;font-size:28px;margin-top:26px">Bridgeport, Connecticut — before the first bell</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s2" class="clip" data-start="14" data-duration="16" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="tire">
|
||
|
|
<div class="ring"></div>
|
||
|
|
<div class="crack"></div>
|
||
|
|
<div class="press">psi 78 · OK</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="16" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="zone">
|
||
|
|
<div class="dz dz1"></div>
|
||
|
|
<div class="dz dz2"></div>
|
||
|
|
<div class="yield">DANGER ZONE</div>
|
||
|
|
<div class="bus"></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s4" class="clip" data-start="46" data-duration="14" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="stoparm">
|
||
|
|
<div class="arm">STOP</div>
|
||
|
|
<div class="num" style="position:absolute;left:0;bottom:0">log signed · 06:02 · run clear</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="14"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="30"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="46"></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 — title cards slide in
|
||
|
|
tl.from("#s1 .kicker", { opacity: 0, y: 24, duration: 0.8, ease: "power3.out" }, 0.6);
|
||
|
|
tl.from("#s1 h1", { opacity: 0, y: 30, duration: 0.9, ease: "power3.out" }, 1.1);
|
||
|
|
tl.from("#s1 div", { opacity: 0, duration: 0.8, ease: "power3.out" }, 1.8);
|
||
|
|
tl.to("#s1 .frame", { opacity: 0, duration: 0.7, ease: "power2.in" }, 12.8);
|
||
|
|
|
||
|
|
// s2 — tire crack emerges, psi ticks
|
||
|
|
tl.from("#s2 .ring", { scale: 0.7, opacity: 0, duration: 0.9, ease: "power3.out" }, 14.4);
|
||
|
|
tl.from("#s2 .crack", { opacity: 0, scaleX: 0, duration: 0.8, transformOrigin: "left center", ease: "power2.out" }, 16.0);
|
||
|
|
tl.from("#s2 .press", { opacity: 0, y: 14, duration: 0.6 }, 17.2);
|
||
|
|
|
||
|
|
// s3 — danger zones bloom
|
||
|
|
tl.from("#s3 .dz1", { opacity: 0, scale: 0.85, duration: 0.9, ease: "power2.out" }, 30.4);
|
||
|
|
tl.from("#s3 .dz2", { opacity: 0, scale: 0.8, duration: 0.9, ease: "power2.out" }, 31.2);
|
||
|
|
tl.from("#s3 .bus", { y: 60, opacity: 0, duration: 0.8, ease: "power3.out" }, 31.8);
|
||
|
|
tl.from("#s3 .yield", { opacity: 0, letterSpacing: "18px", x: -18, duration: 0.7 }, 33.0);
|
||
|
|
|
||
|
|
// s4 — stop arm swings out like paint settling
|
||
|
|
tl.from("#s4 .arm", { opacity: 0, scaleX: 0.2, transformOrigin: "left center", duration: 0.8, ease: "power2.out" }, 46.4);
|
||
|
|
tl.from("#s4 .num", { opacity: 0, duration: 0.7 }, 57.5);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|