132 lines
7.3 KiB
HTML
132 lines
7.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="torque / tôrk / n. assembly line · fabrication shop · nashville A click. That's all the wrench gives you — one click when you hit the number on the dial.…"><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:#0d1117;color:#d8dee3;font-family:'Courier New',ui-monospace,monospace}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:
|
||
|
|
repeating-linear-gradient(0deg, rgba(45,58,70,.18) 0 1px, transparent 1px 72px),
|
||
|
|
repeating-linear-gradient(90deg, rgba(45,58,70,.18) 0 1px, transparent 1px 72px),
|
||
|
|
#0d1117}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.label{position:absolute;top:64px;left:96px;font-size:28px;letter-spacing:.4em;
|
||
|
|
text-transform:uppercase;color:#e8a33d;opacity:.85}
|
||
|
|
.kicker{position:absolute;top:104px;left:96px;font-size:19px;color:#7a8794;
|
||
|
|
letter-spacing:.18em}
|
||
|
|
.rule{position:absolute;left:96px;height:1px;background:#3a4a5a;width:1728px}
|
||
|
|
.big{max-width:1500px;text-align:left;font-size:72px;line-height:1.18;
|
||
|
|
font-weight:700;color:#f0f4f7}
|
||
|
|
.big em{color:#e8a33d;font-style:normal}
|
||
|
|
.med{max-width:1540px;text-align:left;font-size:52px;line-height:1.32;color:#c6d0d8}
|
||
|
|
.dial{position:absolute;right:200px;top:320px;width:320px;height:320px}
|
||
|
|
.dial .face{fill:#0d1117;stroke:#5b6b7a;stroke-width:3}
|
||
|
|
.dial .tick{stroke:#5b6b7a;stroke-width:3}
|
||
|
|
.dial .needle{stroke:#e8a33d;stroke-width:6;stroke-linecap:round}
|
||
|
|
.dial .ring{fill:none;stroke:#3a4a5a;stroke-width:2;stroke-dasharray:4 8}
|
||
|
|
.hide{opacity:0}
|
||
|
|
.cap{color:#e8a33d;font-weight:700}
|
||
|
|
.copy{position:absolute;top:760px;left:96px;font-size:26px;color:#7a8794;
|
||
|
|
letter-spacing:.1em}
|
||
|
|
</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="75">
|
||
|
|
|
||
|
|
<!-- SCENE 1 -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||
|
|
<div class="label hide" id="s1-label">torque / tôrk / n.</div>
|
||
|
|
<div class="kicker hide" id="s1-kicker">assembly line · fabrication shop · nashville</div>
|
||
|
|
<div class="rule hide" id="s1-rule" style="top:196px"></div>
|
||
|
|
<h1 class="big hide" id="s1-title">A <em>click.</em> That's all the wrench gives you — one click when you hit the number on the dial.</h1>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2 -->
|
||
|
|
<section id="s2" class="clip" data-start="12" data-duration="21" data-track-index="1">
|
||
|
|
<svg class="dial hide" id="s2-dial" viewBox="0 0 320 320">
|
||
|
|
<circle class="face" cx="160" cy="160" r="150"/>
|
||
|
|
<circle class="ring" cx="160" cy="160" r="128"/>
|
||
|
|
<g id="s2-ticks"></g>
|
||
|
|
<line id="s2-needle" class="needle" x1="160" y1="160" x2="160" y2="52"/>
|
||
|
|
<circle cx="160" cy="160" r="14" fill="#e8a33d"/>
|
||
|
|
</svg>
|
||
|
|
<h1 class="med hide" id="s2-title" style="position:absolute;left:96px;top:700px;max-width:1500px">
|
||
|
|
But a click is a <span class="cap">floor, not a ceiling.</span> Behind the sound, your hand feels a thread that's binding, a bolt that was cross-threaded yesterday, a joint that'll sing loose by Friday.<br/>
|
||
|
|
<span style="font-size:36px;color:#7a8794">the click tells you WHEN. the feel tells you WHETHER.</span>
|
||
|
|
</h1>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3 -->
|
||
|
|
<section id="s3" class="clip" data-start="33" data-duration="23" data-track-index="1">
|
||
|
|
<div class="label hide" id="s3-label">on the line</div>
|
||
|
|
<div class="rule hide" id="s3-rule" style="top:196px"></div>
|
||
|
|
<h1 class="big hide" id="s3-title" style="max-width:1560px">We make the <em>same bracket</em> sixty times a shift. Spec says thirty foot-pounds. I've done it long enough that my hand <em>is</em> a torque wrench — I can feel a bolt that's tired before it ever hits the gun.</h1>
|
||
|
|
<div class="copy hide" id="s3-copy">"you don't rush a seat. you let it speak."</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 4 -->
|
||
|
|
<section id="s4" class="clip" data-start="56" data-duration="19" data-track-index="1">
|
||
|
|
<div class="kicker hide" id="s4-kicker">east nashville · where the work meets the music</div>
|
||
|
|
<h1 class="big hide" id="s4-title" style="max-width:1560px">Same thing outside the shop — a <em>guitar string,</em> a drum fill. You tune by feel, not the number. The click is the machine talking. The <em>quiet after</em> is the craft.</h1>
|
||
|
|
<div class="copy hide" id="s4-copy">"that's the part nobody puts in the spec sheet."</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="1"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="12.5"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="33.5"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="57"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// draw dial ticks
|
||
|
|
(function(){
|
||
|
|
var g = document.getElementById('s2-ticks');
|
||
|
|
for (var i = 0; i < 24; i++) {
|
||
|
|
var a = -150 + i * 12.5;
|
||
|
|
var r1 = 118, r2 = 132;
|
||
|
|
var x1 = 160 + r1 * Math.cos(a * Math.PI/180);
|
||
|
|
var y1 = 160 + r1 * Math.sin(a * Math.PI/180);
|
||
|
|
var x2 = 160 + r2 * Math.cos(a * Math.PI/180);
|
||
|
|
var y2 = 160 + r2 * Math.sin(a * Math.PI/180);
|
||
|
|
var l = document.createElementNS('http://www.w3.org/2000/svg','line');
|
||
|
|
l.setAttribute('class','tick'); l.setAttribute('x1',x1); l.setAttribute('y1',y1);
|
||
|
|
l.setAttribute('x2',x2); l.setAttribute('y2',y2);
|
||
|
|
g.appendChild(l);
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// scene 1
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 1.2);
|
||
|
|
tl.to("#s1-label", { opacity: .85, duration: .5 }, 1.0);
|
||
|
|
tl.to("#s1-kicker", { opacity: .9, duration: .5 }, 1.0);
|
||
|
|
tl.to("#s1-rule", { opacity: 1, duration: .3 }, 1.0);
|
||
|
|
tl.to("#s1-title", { opacity: 0, duration: .5 }, 10.8);
|
||
|
|
|
||
|
|
// scene 2 — dial turns, needle sweeps
|
||
|
|
tl.set("#s2-dial", { opacity: 0 }, 12);
|
||
|
|
tl.to("#s2-dial", { opacity: 1, duration: .6 }, 12.4);
|
||
|
|
tl.fromTo("#s2-needle", { rotation: -120, svgOrigin: "160 160" },
|
||
|
|
{ rotation: 0, svgOrigin: "160 160", duration: 4, ease: "power1.inOut" }, 13.2);
|
||
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: .8, ease: "power3.out" }, 16.0);
|
||
|
|
tl.to("#s2-needle", { rotation: 18, svgOrigin: "160 160", duration: 1.6, ease: "power1.out" }, 27);
|
||
|
|
tl.to("#s2-title", { opacity: 0, duration: .5 }, 32);
|
||
|
|
|
||
|
|
// scene 3 — bracket line
|
||
|
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: .8, ease: "power3.out" }, 33.6);
|
||
|
|
tl.to("#s3-label", { opacity: .85, duration: .5 }, 33.4);
|
||
|
|
tl.to("#s3-rule", { opacity: 1, duration: .3 }, 33.4);
|
||
|
|
tl.to("#s3-copy", { opacity: 1, duration: .6 }, 44);
|
||
|
|
tl.to("#s3-title", { opacity: 0, duration: .5 }, 55);
|
||
|
|
|
||
|
|
// scene 4 — closing
|
||
|
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: .8, ease: "power3.out" }, 57.2);
|
||
|
|
tl.to("#s4-kicker", { opacity: .9, duration: .5 }, 57.0);
|
||
|
|
tl.to("#s4-copy", { opacity: 1, duration: .6 }, 65);
|
||
|
|
tl.to("#s4-title", { opacity: 0, duration: .5 }, 73.5);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|