107 lines
5.9 KiB
HTML
107 lines
5.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="Spindle Preload The quiet bolt that holds a machining center together. Anna Brown, Tulsa floor. Too little, it wobbles. Over-tighten and the balls skid,…"><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:#0a0e0a;color:#d8f5c8;font-family:'Courier New',monospace}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0a0e0a}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.panel{position:absolute;inset:0;background:#0a0e0a}
|
||
|
|
.grid{position:absolute;inset:0;opacity:0.08;
|
||
|
|
background-image:linear-gradient(#1a3a1a 1px,transparent 1px),linear-gradient(90deg,#1a3a1a 1px,transparent 1px);
|
||
|
|
background-size:40px 40px}
|
||
|
|
h1{font-size:120px;letter-spacing:2px;text-transform:uppercase;border:4px solid #b8f59a;padding:24px 48px;font-weight:700}
|
||
|
|
h2{font-size:80px;text-transform:uppercase;letter-spacing:1px;font-weight:700;line-height:1.2}
|
||
|
|
.big{font-size:220px;font-weight:700;color:#b8f59a}
|
||
|
|
.spec{position:absolute;left:80px;bottom:90px;font-size:44px;line-height:1.5;color:#8fd56a;max-width:1700px}
|
||
|
|
.badge{position:absolute;top:70px;right:80px;font-size:40px;border:2px solid #6a8f4a;padding:14px 28px;color:#6a8f4a}
|
||
|
|
.accent{color:#b8f59a;font-weight:700}
|
||
|
|
.seq{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;place-items:center;padding:0 80px}
|
||
|
|
.seq .card{width:520px;height:520px;border:4px solid #6a8f4a;position:relative}
|
||
|
|
.seq .card .num{position:absolute;top:-30px;left:-30px;width:80px;height:80px;background:#b8f59a;color:#0a0e0a;font-size:52px;font-weight:700;display:grid;place-items:center}
|
||
|
|
.card .lab{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:40px;color:#b8f59a}
|
||
|
|
.bars{position:absolute;left:80px;bottom:120px;right:80px;display:flex;flex-direction:column;gap:30px}
|
||
|
|
.row{display:flex;align-items:center;gap:24px;font-size:44px}
|
||
|
|
.row .nm{width:420px;text-align:right}
|
||
|
|
.row .trk{width:1100px;height:36px;background:#15240f;position:relative}
|
||
|
|
.row .trk i{position:absolute;height:36px;background:#b8f59a}
|
||
|
|
.row .val{width:300px;color:#8fd56a}
|
||
|
|
.rule{position:absolute;left:10%;right:10%;top:0;height:6px;background:#b8f59a}
|
||
|
|
</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="34">
|
||
|
|
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="6"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="12"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="19"></audio>
|
||
|
|
<audio id="voice-s5" src="audio/s5.wav" data-start="25"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
|
||
|
|
<!-- S1 title -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="6" data-track-index="1">
|
||
|
|
<div class="panel"><div class="grid"></div></div>
|
||
|
|
<h1 id="s1-title">Spindle Preload</h1>
|
||
|
|
<div class="spec" id="s1-sub">The quiet bolt that holds a machining center together. Anna Brown, Tulsa floor.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S2 what it is -->
|
||
|
|
<section id="s2" class="clip" data-start="6" data-duration="6" data-track-index="1">
|
||
|
|
<div style="text-align:left;padding:0 160px">
|
||
|
|
<h2 id="s2-title">Too little, it wobbles.</h2>
|
||
|
|
<div style="font-size:48px;margin-top:40px;line-height:1.6">Over-tighten and the balls skid, it cooks the grease,<br/>and the whole spindle groans itself to death.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S3 the sweet spot -->
|
||
|
|
<section id="s3" class="clip" data-start="12" data-duration="7" data-track-index="1">
|
||
|
|
<div style="text-align:center">
|
||
|
|
<div class="big" id="s3-num">The sweet spot</div>
|
||
|
|
<div style="font-size:52px;margin-top:60px">Enough squeeze to keep the contact angle stiff<br/><span class="accent">without climbing past the grease's heat ceiling.</span></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S4 three signs of trouble -->
|
||
|
|
<section id="s4" class="clip" data-start="19" data-duration="6" data-track-index="1">
|
||
|
|
<div style="position:relative;width:100%;height:100%">
|
||
|
|
<div class="badge">SHOP-SIDE TELLS</div>
|
||
|
|
<div class="seq">
|
||
|
|
<div class="card"><div class="num">1</div><div class="lab">Warm nose after warmup</div></div>
|
||
|
|
<div class="card"><div class="num">2</div><div class="lab">Chirp on rapids</div></div>
|
||
|
|
<div class="card"><div class="num">3</div><div class="lab">Sickly tool life</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S5 outro -->
|
||
|
|
<section id="s5" class="clip" data-start="25" data-duration="9" data-track-index="1">
|
||
|
|
<div class="panel"><div class="grid"></div></div>
|
||
|
|
<div style="text-align:center">
|
||
|
|
<h2 id="s5-title">Preload ain't a guess.</h2>
|
||
|
|
<div style="font-size:50px;margin-top:60px;line-height:1.5">
|
||
|
|
Set it cold. Mark the locknut.</br>
|
||
|
|
Jot it in the machine log.<br/><br/>
|
||
|
|
<span class="accent">Feel the metal — it'll talk before it breaks.</span>
|
||
|
|
</div>
|
||
|
|
<div style="font-size:36px;margin-top:60px;color:#6a8f4a">More of the full guide at anna-brown.4ort.net</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
// S1
|
||
|
|
tl.from("#s1-title", { opacity: 0, scale: 0.85, duration: 0.8, ease: "power3.out" }, 0.4);
|
||
|
|
tl.from("#s1-sub", { opacity: 0, y: 30, duration: 0.8 }, 1.2);
|
||
|
|
// S2
|
||
|
|
tl.from("#s2-title", { opacity: 0, x: -50, duration: 0.7 }, 6.4);
|
||
|
|
// S3
|
||
|
|
tl.from("#s3-num", { opacity: 0, scale: 1.1, duration: 0.7 }, 12.4);
|
||
|
|
// S4 cards stagger
|
||
|
|
tl.from(".card", { opacity: 0, y: 60, duration: 0.5, stagger: 0.25 }, 19.4);
|
||
|
|
// S5
|
||
|
|
tl.from("#s5-title", { opacity: 0, y: 30, duration: 0.6 }, 25.4);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|