jwright/exploded-cluster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

strip the pilot bench: markup, engine wiring and css - scenes stand clean

Browse Source
This commit is contained in:
Jonathon Wright
2026-08-17 16:16:57 +10:00
parent d8a39c6a6c
commit fee0de72e6
1 changed files with 5 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pilot/arc.tpl.html
+5 -32
View File
@@ -66,7 +66,6 @@
</div>
</figure>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<p>An image got <b>built</b> - of what, exactly? <b>Pushed</b> - to where, and what travelled?
@@ -94,7 +93,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>A stack of diffs wearing a name</h3>
@@ -141,7 +139,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>Desired against actual, forever</h3>
@@ -186,7 +183,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>One component starts containers. One.</h3>
@@ -226,7 +222,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>The jacket, not the container</h3>
@@ -269,7 +264,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>The stable name in front of the churn</h3>
@@ -308,7 +302,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>The doorman interviews every pod</h3>
@@ -353,7 +346,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>The loop you already know, one level up</h3>
@@ -423,7 +415,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>Say the name properly</h3>
@@ -489,7 +480,6 @@
</figure>
<ol class="legend"></ol>
</div>
<div class="bench"></div>
</div>
<div class="prose">
<h3>It's Go under the braces</h3>
@@ -733,9 +723,6 @@ body.fx .crt .line{opacity:0;transform:translateY(4px);transition:opacity .3s ea
body.fx .crt .line.on{opacity:1;transform:none}
@media (max-width:700px){.crt{inset:16% 12%}}
.bench{width:min(720px,100%);margin:16px auto 0;text-align:center}
.bench input{width:100%;accent-color:var(--cyan)}
.bench .hud{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--dim);margin:.45rem 0 0}
.prose{max-width:66ch;margin:0 auto;padding:5vh 24px 9vh}
.prose h3{font-size:1.18rem;font-weight:600;letter-spacing:-.01em;margin:2.6rem 0 .8rem;color:var(--ink)}
@@ -773,7 +760,6 @@ body.fx .crt .line.on{opacity:1;transform:none}
.masthead{padding:9vh 22px 6vh}
}
body:not(.fx) .slab{display:none}
body:not(.fx) .bench{display:none}
</style>
<script>
@@ -828,25 +814,12 @@ body:not(.fx) .bench{display:none}
// the side list lights in reading order, top to bottom, as the scrub advances
lis.forEach((li, i) => li.classList.toggle("lit", t >= 0.9 * ((i + 0.5) / n)));
};
// bench: hand scrub + HUD (pilot instrument - strip for the site ship)
const bench = u.sec.querySelector(".bench");
bench.innerHTML = '<input type="range" min="0" max="1000" value="0" aria-label="scrub the teardown">' +
'<p class="hud">boot</p>';
u.hud = bench.querySelector(".hud");
u.slider = bench.querySelector("input");
u.show = v => {
u.hud.textContent = u.mode + " · " + innerWidth + "x" + innerHeight +
" · scroll " + Math.round(scrollY) + " · t=" + v.toFixed(2);
u.slider.value = String(Math.round(v * 1000));
};
u.drive = v => { u.apply(v); u.show(v); };
u.slider.addEventListener("input", () => u.drive(+u.slider.value / 1000));
});
const boot = () => {
const scrollable = document.documentElement.scrollHeight - innerHeight > 200;
units.forEach(u => {
if (RM) { u.mode = "reduced-motion"; u.drive(1); return; }
if (RM) { u.mode = "reduced-motion"; u.apply(1); return; }
if (scrollable && matchMedia("(min-width: 901px)").matches) {
u.mode = "pin+scrub";
ScrollTrigger.create({
@@ -855,19 +828,19 @@ body:not(.fx) .bench{display:none}
end: "+=1800",
pin: true,
scrub: 0.6,
onUpdate: self => u.drive(self.progress),
onUpdate: self => u.apply(self.progress),
onRefreshInit: () => u.apply(0)
});
u.drive(0);
u.apply(0);
} else {
u.mode = "assemble";
u.sec.querySelector(".pin").style.minHeight = "0";
u.drive(0);
u.apply(0);
const io = new IntersectionObserver(es => {
if (!es.some(e => e.isIntersecting)) return;
io.disconnect();
gsap.to({ v: 0 }, { v: 1, duration: 1.6, ease: "power3.out",
onUpdate: function () { u.drive(this.targets()[0].v); } });
onUpdate: function () { u.apply(this.targets()[0].v); } });
}, { threshold: 0.2 });
io.observe(u.scene);
}