105 lines
6.6 KiB
HTML
105 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="THE LANGUAGE OF THE CUT · 01 Every shop floor has this argument. the man who trusts his hands, &amp; the man who trusts the gauge. 0.8 But the work itself…"><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:#070a0d;color:#e8e2d0;font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#070a0d}
|
|
.clip{position:absolute;inset:0;display:block}
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
|
|
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,13,.20) 0%,rgba(7,10,13,.82) 100%)}
|
|
.kicker{position:absolute;top:120px;left:140px;font-family:'Courier New',monospace;font-size:30px;letter-spacing:6px;color:#c9a227;opacity:0}
|
|
h1{position:absolute;top:200px;left:140px;right:140px;font-size:88px;line-height:1.02;font-weight:400;margin:0;opacity:0}
|
|
.rule{position:absolute;top:430px;left:140px;width:0;height:3px;background:#c9a227;opacity:0}
|
|
.lane{position:absolute;bottom:140px;left:140px;right:140px;font-size:30px;line-height:1.5;color:#a89f88;font-family:'Courier New',monospace;opacity:0}
|
|
.big{position:absolute;top:260px;left:120px;font-size:900px;line-height:1;font-family:'Courier New',monospace;color:rgba(201,162,39,.16);opacity:0}
|
|
</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="92">
|
|
|
|
<section id="s1" class="clip" data-start="0" data-duration="22" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/29393030/pexels-photo-29393030.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="veil"></div>
|
|
<div class="kicker" id="s1-k">THE LANGUAGE OF THE CUT · 01</div>
|
|
<h1 id="s1-title">Every shop floor<br/>has this argument.</h1>
|
|
<div class="rule" id="s1-rule"></div>
|
|
<div class="lane" id="s1-lane">the man who trusts his hands, & the man who trusts the gauge.</div>
|
|
</section>
|
|
|
|
<section id="s2" class="clip" data-start="22" data-duration="24" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/8865187/pexels-photo-8865187.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="veil"></div>
|
|
<div class="big" id="s2-mark">0.8</div>
|
|
<h1 id="s2-title">But the work itself<br/>never argues.</h1>
|
|
<div class="lane" id="s2-lone">it leaves a report behind, in steel, in shavings.</div>
|
|
</section>
|
|
|
|
<section id="s3" class="clip" data-start="46" data-duration="24" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/36101856/pexels-photo-36101856.png?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="veil"></div>
|
|
<div class="kicker" id="s3-k">THE LANGUAGE OF THE CUT · 02</div>
|
|
<h1 id="s3-title">Read the chip.<br/>It tells you everything.</h1>
|
|
<div class="rule" id="s3-rule"></div>
|
|
<div class="lane" id="s3-line">a tight silver curl — the cut is clean. burnt blue — you're cooking the edge.</div>
|
|
</section>
|
|
|
|
<section id="s4" class="clip" data-start="70" data-duration="22" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/11765538/pexels-photo-11765538.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="veil"></div>
|
|
<div class="kicker" id="s4-k">THE LANGUAGE OF THE CUT · 03</div>
|
|
<h1 id="s4-title">Feel is the compass.<br/>The number is the map.</h1>
|
|
<div class="rule" id="s4-rule"></div>
|
|
<div class="lane" id="s4-line">lean the cell, leave room to move. the grain tells you when it's ready.</div>
|
|
</section>
|
|
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="22"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="46"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="70"></audio>
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// Scene 1 — the argument
|
|
tl.to("#s1-k", { opacity: 1, duration: 0.4 }, 0.4);
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0.6);
|
|
tl.to("#s1-rule", { opacity: 1, width: 140, duration: 0.6 }, 1.6);
|
|
tl.to("#s1-lane", { opacity: 1, duration: 0.8 }, 2.2);
|
|
tl.to("#s1-k", { opacity: 0, duration: 0.5 }, 19.5);
|
|
tl.to("#s1-title", { opacity: 0, y: -20, duration: 0.6 }, 20);
|
|
tl.to("#s1-lane", { opacity: 0, duration: 0.5 }, 20.5);
|
|
|
|
// Scene 2 — the number
|
|
tl.fromTo("#s2-title", { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.8 }, 23);
|
|
tl.fromTo("#s2-mark", { opacity: 0, scale: 1.15 }, { opacity: 1, scale: 1, duration: 2, ease: "power2.out" }, 23.5);
|
|
tl.to("#s2-lone", { opacity: 1, duration: 0.8 }, 26);
|
|
tl.to("#s2-mark", { scale: 1.08, duration: 6, ease: "power1.inOut" }, 30);
|
|
tl.to("#s2-title", { opacity: 0, y: -20, duration: 0.6 }, 43);
|
|
tl.to("#s2-mark", { opacity: 0, duration: 0.5 }, 43);
|
|
|
|
// Scene 3 — read the chip
|
|
tl.to("#s3-k", { opacity: 1, duration: 0.4 }, 47);
|
|
tl.fromTo("#s3-title", { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.8 }, 47.4);
|
|
tl.to("#s3-rule", { opacity: 1, width: 140, duration: 0.6 }, 48.6);
|
|
tl.to("#s3-line", { opacity: 1, duration: 0.8 }, 49.4);
|
|
tl.to("#s3-k", { opacity: 0, duration: 0.5 }, 66.5);
|
|
tl.to("#s3-title", { opacity: 0, y: -20, duration: 0.6 }, 67);
|
|
tl.to("#s3-line", { opacity: 0, duration: 0.5 }, 67);
|
|
tl.to("#s3-rule", { opacity: 0, duration: 0.5 }, 67);
|
|
|
|
// Scene 4 — the discipline
|
|
tl.to("#s4-k", { opacity: 1, duration: 0.4 }, 71);
|
|
tl.fromTo("#s4-title", { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.8 }, 71.4);
|
|
tl.to("#s4-rule", { opacity: 1, width: 140, duration: 0.6 }, 72.6);
|
|
tl.to("#s4-line", { opacity: 1, duration: 0.8 }, 73.4);
|
|
tl.to("#s4-title", { opacity: 1, y: -6, duration: 1.6, ease: "power1.inOut" }, 82);
|
|
tl.to("#s4-rule", { opacity: 1, width: 260, duration: 1.6 }, 82);
|
|
tl.to("#s4-line", { opacity: 1, duration: 1 }, 84);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |