119 lines
7.8 KiB
HTML
119 lines
7.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="ALWYN PHILLIPS · RIG HAND SAN PABLO, CA THE TWO-MINUTE LISTEN THE DRILL WON'T LIE PUMP PRESSURE · psi HYDRAULICS A STEADY PUMP IS A CLEAN A THE TRUTH…"><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:#0a0d0a;color:#d6e0c8;font-family:Georgia,'Times New Roman',serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0a0d0a}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.screen{position:absolute;inset:0;background:#0a0d0a}
|
||
|
|
.gridline{position:absolute;background:rgba(120,150,90,0.18)}
|
||
|
|
.v{width:1px;top:0;bottom:0}
|
||
|
|
.h{height:1px;left:0;right:0}
|
||
|
|
.stamp{position:absolute;top:46px;left:60px;font-family:'Courier New',monospace;font-size:20px;color:#8a9a70;letter-spacing:2px}
|
||
|
|
.stamp.right{left:auto;right:60px;text-align:right}
|
||
|
|
h1{font-size:88px;font-weight:normal;margin:0;color:#e8e0c0;text-align:center;line-height:1.05}
|
||
|
|
h1 .thin{color:#8a9a70;font-size:44px;display:block;letter-spacing:4px;margin-bottom:14px}
|
||
|
|
.bigline{position:absolute;left:140px;right:140px;height:3px;background:#8a9a70}
|
||
|
|
.tooth{position:absolute;width:2px;background:#b8c898}
|
||
|
|
.mono{font-family:'Courier New',monospace;color:#8a9a70;font-size:24px;letter-spacing:1px}
|
||
|
|
.bar{position:absolute;background:#c8d8b0;width:3px}
|
||
|
|
.drill{position:absolute;left:50%;bottom:0;width:10px;background:linear-gradient(#b8c898,#5a6a40);transform:translateX(-50%)}
|
||
|
|
.head{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;background:#6a7a50}
|
||
|
|
.caption-line{position:absolute;bottom:70px;left:0;right:0;text-align:center;font-family:'Courier New',monospace;font-size:26px;color:#b8c898;letter-spacing:1px}
|
||
|
|
</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="72">
|
||
|
|
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="17" data-track-index="1">
|
||
|
|
<div class="screen">
|
||
|
|
<div class="gridline v" style="left:30%"></div>
|
||
|
|
<div class="gridline v" style="left:70%"></div>
|
||
|
|
<div class="gridline h" style="top:25%"></div>
|
||
|
|
<div class="gridline h" style="top:75%"></div>
|
||
|
|
<div class="stamp">ALWYN PHILLIPS · RIG HAND</div>
|
||
|
|
<div class="stamp right">SAN PABLO, CA</div>
|
||
|
|
<h1 id="s1-title" style="opacity:0"><span class="thin">THE TWO-MINUTE LISTEN</span>THE DRILL WON'T LIE</h1>
|
||
|
|
<div class="bigline" id="s1-line" style="bottom:120px;transform:scaleX(0)"></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s2" class="clip" data-start="17" data-duration="20" data-track-index="1">
|
||
|
|
<div class="screen">
|
||
|
|
<div class="drill" id="s2-rod" style="height:680px"></div>
|
||
|
|
<div class="head" id="s2-head" style="width:120px;height:120px;bottom:680px"></div>
|
||
|
|
<div id="s2-gauge" style="position:absolute;left:120px;top:160px;width:300px;height:300px;border:3px solid #8a9a70;border-radius:50%"></div>
|
||
|
|
<div id="s2-gaugebar" style="position:absolute;left:150px;top:195px;height:8px;background:#c8d8b0;width:0%"></div>
|
||
|
|
<div class="mono" style="position:absolute;left:150px;top:250px">PUMP PRESSURE · psi</div>
|
||
|
|
<h1 id="s2-title" style="opacity:0;font-size:64px"><span class="thin">HYDRAULICS</span>A STEADY PUMP IS A CLEAN A</h1>
|
||
|
|
<span class="bar" id="s2-b1" style="left:38%;bottom:0;height:0%"></span>
|
||
|
|
<span class="bar" id="s2-b2" style="left:42%;bottom:0;height:0%"></span>
|
||
|
|
<span class="bar" id="s2-b3" style="left:46%;bottom:0;height:0%"></span>
|
||
|
|
<span class="bar" id="s2-b4" style="left:50%;bottom:0;height:0%"></span>
|
||
|
|
<span class="bar" id="s2-b5" style="left:54%;bottom:0;height:0%"></span>
|
||
|
|
<span class="bar" id="s2-b6" style="left:58%;bottom:0;height:0%"></span>
|
||
|
|
<span class="bar" id="s2-b7" style="left:62%;bottom:0;height:0%"></span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s3" class="clip" data-start="37" data-duration="18" data-track-index="1">
|
||
|
|
<div class="screen">
|
||
|
|
<div class="gridline h" style="top:50%"></div>
|
||
|
|
<h1 id="s3-title" style="opacity:0;font-size:70px"><span class="thin">THE TRUTH INSTRUMENT</span>IT'S THE FEEL THROUGH YOUR BOOTS</h1>
|
||
|
|
<div class="mono" id="s3-note" style="position:absolute;bottom:140px;left:50%;transform:translateX(-50%)">ALUMINUM LIES · TORQUE QUOTES ARGUE · THE ROD DOESN'T</div>
|
||
|
|
<div id="s3-warn" style="position:absolute;right:80px;top:90px;border:3px solid #b06040;color:#d08060;font-family:'Courier New',monospace;font-size:30px;padding:18px 28px;letter-spacing:2px">⚠ NOT A PRESSURE-JOB SITE</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s4" class="clip" data-start="55" data-duration="17" data-track-index="1">
|
||
|
|
<div class="screen">
|
||
|
|
<div class="gridline v" style="left:20%"></div>
|
||
|
|
<div class="gridline v" style="left:80%"></div>
|
||
|
|
<div class="drill" id="s4-rod" style="height:640px"></div>
|
||
|
|
<div class="head" id="s4-head" style="width:100px;height:100px;bottom:640px"></div>
|
||
|
|
<div class="spin-ring" id="s4-ring" style="position:absolute;left:50%;bottom:300px;width:220px;height:220px;border:6px solid #b8c898;border-radius:50%;transform:translateX(-50%)"></div>
|
||
|
|
<h1 id="s4-title" style="opacity:0;font-size:66px"><span class="thin">TWO MINUTES. THEN WE SPIN.</span>TRUST THE HUM</h1>
|
||
|
|
<div class="mono" id="s4-dep" style="position:absolute;bottom:120px;left:50%;transform:translateX(-50%)">50 FT DOWN · NO ONE WATCHING BUT YOU</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="17"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="37"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="55"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.13"></audio>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// scene 1 — title reveal
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: -20, duration: 1.4, ease: "power3.out" }, 0.4);
|
||
|
|
tl.to("#s1-line", { scaleX: 1, duration: 1.2, ease: "power2.out" }, 1.0);
|
||
|
|
|
||
|
|
// scene 2 — hydraulics
|
||
|
|
tl.to("#s2-gaugebar", { width: "78%", duration: 14, ease: "power1.inOut" }, 18);
|
||
|
|
tl.to("#s2-rod", { scaleX: 1.02, duration: 1.2, yoyo: true, repeat: 5, ease: "sine.inOut" }, 18);
|
||
|
|
tl.to("#s2-b1", { height: "58%", duration: 6, ease: "sine.inOut" }, 18);
|
||
|
|
tl.to("#s2-b2", { height: "62%", duration: 6, ease: "sine.inOut" }, 18.3);
|
||
|
|
tl.to("#s2-b3", { height: "66%", duration: 6, ease: "sine.inOut" }, 18.6);
|
||
|
|
tl.to("#s2-b4", { height: "70%", duration: 6, ease: "sine.inOut" }, 18.9);
|
||
|
|
tl.to("#s2-b5", { height: "66%", duration: 6, ease: "sine.inOut" }, 19.2);
|
||
|
|
tl.to("#s2-b6", { height: "60%", duration: 6, ease: "sine.inOut" }, 19.5);
|
||
|
|
tl.to("#s2-b7", { height: "56%", duration: 6, ease: "sine.inOut" }, 19.8);
|
||
|
|
tl.to("#s2-title", { opacity: 1, duration: 1.0, ease: "power3.out" }, 21);
|
||
|
|
|
||
|
|
// scene 3 — truth
|
||
|
|
tl.to("#s3-title", { opacity: 1, duration: 1.0, ease: "power3.out" }, 38.5);
|
||
|
|
tl.to("#s3-warn", { opacity: 1, scale: 1.02, duration: 2, ease: "sine.inOut" }, 41);
|
||
|
|
|
||
|
|
// scene 4 — spin up
|
||
|
|
tl.to("#s4-rod", { scaleX: 1.03, scaleY: 1.02, duration: 2, yoyo: true, repeat: 4, ease: "power1.in" }, 56);
|
||
|
|
tl.to("#s4-head", { rotation: 720, duration: 8, ease: "power2.in", transformOrigin: "50% 50%" }, 56);
|
||
|
|
tl.fromTo("#s4-ring", { opacity: 0.2 }, { opacity: 0.9, duration: 4, ease: "power1.in" }, 56);
|
||
|
|
tl.to("#s4-title", { opacity: 1, duration: 1.0, ease: "power3.out" }, 58);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|