82 lines
5.1 KiB
HTML
82 lines
5.1 KiB
HTML
<!doctype html>
|
||
<html><head>
|
||
<meta name="description" content="PRE-TRIP × 0.25 HRS × 41 CHECKS THE MORNING READING TIRES — LUGS — HUBS WALK THE TAPE FIFTEEN MINUTES. NO CORNERS CUT. A PROMISE PAID IN TOMORROWS"><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:#10131a;color:#e8e0c8;font-family:"Courier New",ui-monospace,monospace}
|
||
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
.clip{position:absolute;inset:0;display:grid;place-items:center;align-content:center}
|
||
.gridline{position:absolute;background:#2c3547;opacity:.35}
|
||
.h1{font-size:120px;font-weight:700;letter-spacing:.06em;line-height:1.1;text-align:center;max-width:1500px;margin:0 auto;opacity:0}
|
||
.h1 .a{color:#d9c37a}
|
||
.h1 .b{color:#e8e0c8}
|
||
.ser{font-size:40px;color:#7d8aa0;text-align:center;letter-spacing:.35em;text-transform:uppercase;margin-top:34px;opacity:0}
|
||
.bar{width:520px;height:8px;background:#d9c37a;margin:40px auto 0;opacity:0}
|
||
.imgsc{position:absolute;inset:0}
|
||
.imgsc img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(.9) sepia(.25) contrast(1.1)}
|
||
.imgsc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,19,26,.15) 0%,rgba(16,19,26,.25) 55%,rgba(16,19,26,.88) 100%)}
|
||
.overlay{position:relative;z-index:2;text-align:center;padding:0 120px}
|
||
.vein{position:absolute;left:0;right:0;height:3px;background:rgba(217,195,122,.5);top:50%}
|
||
</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="56">
|
||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
<audio id="voice-s2" src="audio/s2.wav" data-start="21"></audio>
|
||
<audio id="voice-s3" src="audio/s3.wav" data-start="39"></audio>
|
||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
||
<!-- SCENE 1: The Reading -->
|
||
<section id="s1" class="clip" data-start="0" data-duration="21" data-track-index="1">
|
||
<div class="gridline" style="height:2px;top:118px;left:80px;right:80px"></div>
|
||
<div class="gridline" style="height:2px;bottom:118px;left:80px;right:80px"></div>
|
||
<div class="gridline" style="width:2px;left:118px;top:80px;bottom:80px"></div>
|
||
<div class="gridline" style="width:2px;right:118px;top:80px;bottom:80px"></div>
|
||
<div class="ser" id="s1-ser">PRE-TRIP × 0.25 HRS × 41 CHECKS</div>
|
||
<h1 class="h1" id="s1-title"><span class="a">THE</span> <span class="b">MORNING</span><br/><span class="b">READING</span></h1>
|
||
<div class="bar" id="s1-bar"></div>
|
||
</section>
|
||
|
||
<!-- SCENE 2: Tires -->
|
||
<section id="s2" class="clip" data-start="21" data-duration="18" data-track-index="1">
|
||
<div class="imgsc"><img src="https://images.pexels.com/photos/6720539/pexels-photo-6720539.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Mechanic checking a truck wheel"/></div>
|
||
<div class="overlay">
|
||
<div class="ser" id="s2-ser">TIRES — LUGS — HUBS</div>
|
||
<h1 class="h1" id="s2-title" style="font-size:96px"><span class="a">WALK</span> <span class="b">THE TAPE</span></h1>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SCENE 3: Brakes / promise -->
|
||
<section id="s3" class="clip" data-start="39" data-duration="17" data-track-index="1">
|
||
<div class="gridline" style="height:2px;top:118px;left:80px;right:80px"></div>
|
||
<div class="gridline" style="height:2px;bottom:118px;left:80px;right:80px"></div>
|
||
<div class="vein" id="s3-vein"></div>
|
||
<div class="ser" id="s3-ser" style="position:relative;margin-top:-40px">FIFTEEN MINUTES. NO CORNERS CUT.</div>
|
||
<h1 class="h1" id="s3-title" style="font-size:104px;position:relative"><span class="a">A PROMISE</span><br/><span class="b">PAID IN TOMORROWS</span></h1>
|
||
</section>
|
||
</div>
|
||
<script>
|
||
window.__timelines = window.__timelines || {};
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
// scene 1
|
||
tl.to("#s1-ser", { opacity:1, duration:1.2, ease:"power1.out" }, 0.8);
|
||
tl.fromTo("#s1-title", { y:40, opacity:0 }, { y:0, opacity:1, duration:1.6, ease:"power3.out" }, 1.4);
|
||
tl.to("#s1-bar", { opacity:1, scaleX:1, transformOrigin:"center center", duration:1.0, ease:"power2.out" }, 2.6);
|
||
tl.to("#s1-title", { opacity:0.9, duration:1.5, ease:"none" }, 18.5);
|
||
tl.to("#s1-ser", { opacity:0, duration:0.8 }, 19.2);
|
||
|
||
// scene 2
|
||
tl.fromTo("#s2 img", { scale:1.08 }, { scale:1, duration:6, ease:"power1.out" }, 21.5);
|
||
tl.fromTo("#s2-title", { y:36, opacity:0 }, { y:0, opacity:1, duration:1.3, ease:"power3.out" }, 22.2);
|
||
tl.to("#s2-ser", { opacity:1, duration:1.0 }, 23.6);
|
||
tl.to("#s2-title", { opacity:0.85, duration:1.2 }, 35.5);
|
||
|
||
// scene 3
|
||
tl.fromTo("#s3-title", { y:44, opacity:0 }, { y:0, opacity:1, duration:1.5, ease:"power3.out" }, 39.6);
|
||
tl.to("#s3-ser", { opacity:1, duration:1.0 }, 41.0);
|
||
tl.fromTo("#s3-vein", { scaleX:0.15, opacity:0 }, { scaleX:1, opacity:.5, duration:4, ease:"power1.inOut" }, 43.0);
|
||
|
||
window.__timelines["main"] = tl;
|
||
</script>
|
||
</body></html> |