v3: P2 prompt pack (scenes 00, II-V) + pilot bench - regime detect, HUD, hand scrub

This commit is contained in:
2026-08-17 01:33:16 +10:00
parent dcbf896222
commit 5cce8c5cd3
8 changed files with 434 additions and 23 deletions
+59 -23
View File
@@ -96,6 +96,12 @@ body{margin:0;background:var(--void);color:var(--ink);font-family:var(--sans);
.masthead{padding:10vh 22px 6vh}
}
/* ---- pilot bench (HUD + hand scrub) - strip before P3 wiring ---- */
.bench{width:min(720px,100%);margin:18px auto 0;text-align:center}
.bench input{width:100%;accent-color:var(--cyan)}
.bench .hud{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
color:var(--dim);margin:.5rem 0 0}
/* ---- no JS: the flat hero and the full legend are the page ---- */
body:not(.fx) .slab{display:none}
body:not(.fx) .legend li{position:static;transform:none;opacity:1}
@@ -157,37 +163,67 @@ body:not(.fx) .legend{height:auto;min-height:0;display:flex;flex-direction:colum
setLit(t);
};
const mm = gsap.matchMedia();
// ---- pilot bench: HUD + hand scrub - strip before P3 wiring ----
const bench = document.createElement("div");
bench.className = "bench";
bench.innerHTML =
'<input type="range" min="0" max="1000" value="0" aria-label="scrub the teardown">' +
'<p class="hud">boot</p>';
document.querySelector(".pin").appendChild(bench);
const hud = bench.querySelector(".hud");
const slider = bench.querySelector("input");
let mode = "boot";
const show = v => {
hud.textContent = mode + " \u00b7 " + innerWidth + "x" + innerHeight +
" \u00b7 scroll " + Math.round(scrollY) + " of " +
Math.max(0, document.documentElement.scrollHeight - innerHeight) +
" \u00b7 t=" + v.toFixed(2);
slider.value = String(Math.round(v * 1000));
};
const drive = v => { apply(v); show(v); };
slider.addEventListener("input", () => drive(+slider.value / 1000));
mm.add("(min-width: 861px) and (prefers-reduced-motion: no-preference)", () => {
const st = ScrollTrigger.create({
// The artifact viewer can size the iframe to the content and scroll the PARENT page:
// then this window never scrolls and a pinned scrub can never fire. Pick the engine
// by what the environment can actually do, not by viewport width alone.
const initPin = () => {
mode = "pin+scrub";
ScrollTrigger.create({
trigger: "#course-1",
start: "top top",
end: "+=2200",
pin: ".pin",
scrub: 0.6,
onUpdate: self => apply(self.progress),
onUpdate: self => drive(self.progress),
onRefreshInit: () => apply(0)
});
apply(0);
return () => { st.kill(); apply(1); };
});
ScrollTrigger.refresh();
drive(0);
};
// Small screens and reduced-motion: no pin, no scrub. The scene assembles once on
// entry so the teardown still *reads*, then stays put.
mm.add("(max-width: 860px), (prefers-reduced-motion: reduce)", () => {
if (RM) { apply(1); return () => {}; }
apply(0);
const st = ScrollTrigger.create({
trigger: "#course-1",
start: "top 70%",
once: true,
onEnter: () => gsap.to({ v: 0 }, {
v: 1, duration: 1.5, ease: "power3.out",
onUpdate: function () { apply(this.targets()[0].v); }
})
});
return () => { st.kill(); apply(1); };
});
const initAssemble = () => {
mode = "assemble";
document.querySelector(".pin").style.minHeight = "0"; // svh is degenerate when the frame is content-sized
drive(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 () { drive(this.targets()[0].v); }
});
}, { threshold: 0.15 });
io.observe(scene);
};
const boot = () => {
if (RM) { mode = "reduced-motion"; drive(1); return; }
const scrollable = document.documentElement.scrollHeight - innerHeight > 120;
if (scrollable && matchMedia("(min-width: 861px)").matches) initPin();
else initAssemble();
};
const flat = scene.querySelector(".flat");
(flat.decode ? flat.decode().catch(() => {}) : Promise.resolve())
.then(() => requestAnimationFrame(() => requestAnimationFrame(boot)));
})();
</script>
+47
View File
@@ -0,0 +1,47 @@
# Scene prompt - Course 00: terminal surround (M5 - DOM bezel owns the text)
The CRT terminal itself is DOM-drawn; this hero only DRESSES the scene around it. The
composition rule is therefore inverted from every other scene: the centre must stay EMPTY.
Generate ~4 at 16:9, curate with the reject checklist, save to disk for pickup.
---
Dark technical exploded-view illustration in a cinematic sci-fi engineering style.
Solid near-black deep void background, hex #070b14 - completely clean: no stars, no grid,
no texture, no particles behind or around the objects. Matte dark metal-and-glass surfaces
with glowing neon edge lighting: primary cyan #3fbaf5, secondary magenta #e879f9 accents,
cool white rim highlights. Even studio lighting, no vignette, no lens flare,
no depth-of-field blur. ABSOLUTELY NO text, no letters, no numbers, no words, no code,
no glyphs, no labels, no arrows, no callout lines, no UI elements anywhere in the image -
every surface marking must be an abstract geometric pattern only. Every component is fully
separated from its neighbours by generous gaps of pure void - nothing touching, nothing
overlapping, and no beams, cables, or connectors spanning between the separated parts.
The subject: six dark angular machine fragments - broken armour plates, chamfered metal
shards, and slim engineering brackets with glowing cyan edge seams and occasional magenta
accents - floating in a loose ring near the OUTER EDGES of the frame, as if a machine
casing has just blown apart outward. The exact centre of the frame is a large empty
rectangular region of pure void, roughly half the frame wide and half the frame tall,
with absolutely nothing inside it and nothing crossing into it. The fragments are
distributed around that empty centre: top-left, top-right, left, right, bottom-left,
bottom-right. Each fragment floats alone, fully surrounded by void, angled as if caught
mid-explosion, drifting away from the empty centre.
---
## Build-side notes (not part of the prompt)
- **Deviation from the master block:** "subject perfectly centered" is replaced by the
empty-centre rule above - the DOM CRT bezel occupies the centre rect and owns all text.
30-degree iso camera is dropped too: fragments are free-floating, no ground plane.
- **Slice plan:** ~6 polygons, one per fragment. At rest the fragments sit at their hero
positions framing the terminal; on scroll they fly OUTWARD past the frame edge while the
DOM terminal does its own shard-shatter (P1b). Outward travel past the hero layout is
SAFE in this scene only: the fragments never overlap in the hero, so no slice carries a
hidden bite. The clamp rule still applies to every other scene.
- **Registration:** the bezel's text rect anchors to the DOM grid, never to pixels in this
image. The empty-centre rect in the hero just has to be COMFORTABLY larger than the
bezel at every width (360-1440px check at P1b).
- **Legend mapping:** none - Course 00 has no legend; the terminal copy carries the scene.
- **Watermark:** Gemini sparkle bottom-right - strip with
`bztmon-site/scripts/dewatermark.mjs` before slicing.
+46
View File
@@ -0,0 +1,46 @@
# Scene prompt - Course II scene A: the cluster (decide / run split)
v2 diagram: CONTROL PLANE slab above NODE 1/2/3 - "decide above, run below". Four parts.
Generate ~4 at 16:9, curate with the reject checklist, save to disk for pickup.
---
Dark technical exploded-view illustration in a cinematic sci-fi engineering style.
Solid near-black deep void background, hex #070b14 - completely clean: no stars, no grid,
no texture, no particles behind or around the objects. Matte dark metal-and-glass surfaces
with glowing neon edge lighting: primary cyan #3fbaf5, secondary magenta #e879f9 accents,
cool white rim highlights. Camera: fixed 30-degree isometric angle, subject perfectly
centered with generous empty margins on all sides. Even studio lighting, no vignette,
no lens flare, no depth-of-field blur. ABSOLUTELY NO text, no letters, no numbers, no
words, no code, no glyphs, no labels, no arrows, no callout lines, no UI elements
anywhere in the image - every surface marking must be an abstract geometric pattern
only. Every component is fully separated from its neighbours by generous gaps of pure
void - nothing touching, nothing overlapping, and no beams, cables, or connectors
spanning between the separated parts.
The subject: a small fleet of four machines floating in the void, mid-explosion.
At the top: one wide, flat command slab of dark brushed metal, clearly the authority of
the scene - a strong cyan glowing seam around its edge and a fine glowing lattice pattern
across its top face, hovering alone with a large gap of void beneath it.
Below it: a row of three identical compact worker blocks, evenly spaced with generous
void gaps between them - chunky dark metal cubes, each with a subtle cyan edge glow and
a single soft magenta accent line, visibly simpler and plainer than the command slab
above. All three share the same size and design, reading as interchangeable units.
The four machines are aligned as one formation pulled apart for inspection: one commander
above, three identical workers below.
---
## Build-side notes (not part of the prompt)
- **Slice plan:** 4 polygons - control plane, node 1, node 2, node 3. Collapse pulls the
three nodes up and inward toward the slab (formation closes); scrub opens it to the
hero layout. Travel clamps at the hero - no overshoot.
- **Legend mapping (v2 terms carried to DOM):** control plane "decides - holds truth,
schedules, reconciles" / nodes "run pods" / the decide-vs-run split line. Terms:
declarative intent, reconciliation loop, desired vs actual state.
- **Watermark:** Gemini sparkle bottom-right - strip with
`bztmon-site/scripts/dewatermark.mjs` before slicing.
+57
View File
@@ -0,0 +1,57 @@
# Scene prompt - Course II scene B: the control plane (four processes and a filing cabinet)
v2 diagram: kube-apiserver (the only door), etcd (consensus truth), scheduler
(filter -> score -> bind), controller-manager (the loops). Five parts.
Generate ~4 at 16:9, curate with the reject checklist, save to disk for pickup.
---
Dark technical exploded-view illustration in a cinematic sci-fi engineering style.
Solid near-black deep void background, hex #070b14 - completely clean: no stars, no grid,
no texture, no particles behind or around the objects. Matte dark metal-and-glass surfaces
with glowing neon edge lighting: primary cyan #3fbaf5, secondary magenta #e879f9 accents,
cool white rim highlights. Camera: fixed 30-degree isometric angle, subject perfectly
centered with generous empty margins on all sides. Even studio lighting, no vignette,
no lens flare, no depth-of-field blur. ABSOLUTELY NO text, no letters, no numbers, no
words, no code, no glyphs, no labels, no arrows, no callout lines, no UI elements
anywhere in the image - every surface marking must be an abstract geometric pattern
only. Every component is fully separated from its neighbours by generous gaps of pure
void - nothing touching, nothing overlapping, and no beams, cables, or connectors
spanning between the separated parts.
The subject: five distinct machines floating apart in the void, the internals of one
control room pulled apart for inspection.
Front and centre: a tall imposing gateway block - a monolithic dark metal doorframe with
a single bright cyan glowing vertical slot down its middle, clearly the only entrance to
the scene, the most commanding object in the frame.
Behind and below the gateway: a heavy squat vault - a dark armoured strongbox with
layered horizontal plates like sealed drawers and a deep cyan glow escaping from its
seams, visibly the most protected object in the scene.
To the left of the gateway: a precise instrument block - a slim dark machine with a
tilted glass top face showing an abstract geometric sorting pattern of cyan facets,
elegant and analytical.
To the right of the gateway: a compact engine block with several small circular recesses
on its face, each recess holding a glowing magenta ring, like a bank of idling rotary
mechanisms.
Above the gateway, small and off to one side: a little drifting cluster of three tiny
identical dark chips with faint cyan edges, minor satellites of the bigger machines.
---
## Build-side notes (not part of the prompt)
- **Slice plan:** 5 polygons - apiserver gate, etcd vault, scheduler instrument,
controller-manager ring bank, the chip cluster (spawned pods motif). Collapse draws
everything in toward the gate (everything watches the api-server, nothing talks
sideways); scrub opens to the hero. Clamp at hero.
- **Legend mapping (v2 terms):** kube-apiserver "the only door - authn, authz, admission,
persistence" / etcd "consensus truth - quorum or nothing" / scheduler
"filter -> score -> bind" / controller-manager "the reconciliation loops" / chips =
Deployment -> ReplicaSet -> pods lineage.
- **Watermark:** Gemini sparkle bottom-right - strip with
`bztmon-site/scripts/dewatermark.mjs` before slicing.
+54
View File
@@ -0,0 +1,54 @@
# Scene prompt - Course III scene A: the node (where intent becomes a process)
v2 diagram: kubelet -> containerd/CRI-O -> CNI -> kube-proxy, pod lands here.
"kubelet drives, runtime executes, cni wires, proxy routes." Five parts.
Generate ~4 at 16:9, curate with the reject checklist, save to disk for pickup.
---
Dark technical exploded-view illustration in a cinematic sci-fi engineering style.
Solid near-black deep void background, hex #070b14 - completely clean: no stars, no grid,
no texture, no particles behind or around the objects. Matte dark metal-and-glass surfaces
with glowing neon edge lighting: primary cyan #3fbaf5, secondary magenta #e879f9 accents,
cool white rim highlights. Camera: fixed 30-degree isometric angle, subject perfectly
centered with generous empty margins on all sides. Even studio lighting, no vignette,
no lens flare, no depth-of-field blur. ABSOLUTELY NO text, no letters, no numbers, no
words, no code, no glyphs, no labels, no arrows, no callout lines, no UI elements
anywhere in the image - every surface marking must be an abstract geometric pattern
only. Every component is fully separated from its neighbours by generous gaps of pure
void - nothing touching, nothing overlapping, and no beams, cables, or connectors
spanning between the separated parts.
The subject: five machines arranged in a descending diagonal chain from upper left to
lower right, one workstation pulled apart into its stations, each floating alone with
generous void between them.
First, upper left: a compact command module - a dark angular unit with a bright cyan
glowing visor strip across its front, alert and directive, the driver of the chain.
Second: a powerful engine block - the largest unit, dark layered metal with visible
stacked internal plates glowing faint cyan at their edges, an industrial machine built
to assemble and launch things.
Third: a wiring hub - a dark ring-shaped unit with evenly spaced glowing cyan ports
around its rim and one bright magenta port, clearly the connector of the group.
Fourth, lower right: a routing prism - a faceted dark crystal wedge with thin magenta
light tracing its edges, sharp and directional.
Fifth, floating just above the chain's midpoint: a small sealed capsule - a smooth dark
pill-shaped pod with a soft white-cyan glow, the payload this whole chain exists to run,
descending toward the engine block but not touching anything.
---
## Build-side notes (not part of the prompt)
- **Slice plan:** 5 polygons - kubelet visor module, containerd engine, CNI ring hub,
kube-proxy prism, the pod capsule. Collapse packs the chain into one tight machine
(capsule docked); scrub opens the diagonal and lets the capsule hover. Clamp at hero.
- **Legend mapping (v2 terms):** kubelet "node agent - the only thing that starts your
container" / containerd/CRI-O "pulls images, runs containers (CRI)" / CNI plugin
"a real IP per pod" / kube-proxy or eBPF "makes Services route" / pod "lands here".
- **Watermark:** Gemini sparkle bottom-right - strip with
`bztmon-site/scripts/dewatermark.mjs` before slicing.
+55
View File
@@ -0,0 +1,55 @@
# Scene prompt - Course III scene B: the pod (one IP, shared fate)
v2 diagram: the jacket around containers - app, sidecar, initContainer, volumes, probes,
one shared network namespace. Six parts.
Generate ~4 at 16:9, curate with the reject checklist, save to disk for pickup.
---
Dark technical exploded-view illustration in a cinematic sci-fi engineering style.
Solid near-black deep void background, hex #070b14 - completely clean: no stars, no grid,
no texture, no particles behind or around the objects. Matte dark metal-and-glass surfaces
with glowing neon edge lighting: primary cyan #3fbaf5, secondary magenta #e879f9 accents,
cool white rim highlights. Camera: fixed 30-degree isometric angle, subject perfectly
centered with generous empty margins on all sides. Even studio lighting, no vignette,
no lens flare, no depth-of-field blur. ABSOLUTELY NO text, no letters, no numbers, no
words, no code, no glyphs, no labels, no arrows, no callout lines, no UI elements
anywhere in the image - every surface marking must be an abstract geometric pattern
only. Every component is fully separated from its neighbours by generous gaps of pure
void - nothing touching, nothing overlapping, and no beams, cables, or connectors
spanning between the separated parts.
The subject: one sealed capsule blown open into its six pieces, all floating apart in
the void, mid-explosion.
The two halves of the capsule shell, upper left and upper right: smooth semi-transparent
frosted-glass shells with a soft cyan rim glow, clearly two halves of one enclosure that
has been opened, each floating alone.
Centre: the main core - an upright glowing cylinder of dark metal and glass with a
strong cyan light column inside it, the heart of the scene and its brightest object.
Beside the core, slightly smaller: a companion cylinder of the same design language but
with a magenta light column, clearly a partner unit rather than a twin.
Below the core: a flat gate wedge - a low dark chamfered block with a single amber-white
glowing edge, positioned underneath everything like a foundation step.
To the lower right: a short stack of three thin crystalline discs with faint cyan edge
light, neatly aligned but not touching, storage-like and passive.
---
## Build-side notes (not part of the prompt)
- **Slice plan:** 6 polygons - shell half L, shell half R, app core, sidecar cylinder,
initContainer gate wedge, volume disc stack. Collapse closes the shell around the
contents (the jacket); scrub blows it open to the hero. Clamp at hero.
- **Probes:** NOT in the image - startup/readiness/liveness are legend entries + a small
DOM accent on the core, keeping the part count sliceable. The exit-137 field note
stays with this scene.
- **Legend mapping (v2 terms):** shared network namespace "one IP" / app container "your
process" / sidecar "proxy, logs, reload" / initContainer "runs first, to completion -
the gatekeeper" / volumes "shared mounts" / probes "startup -> readiness -> liveness".
- **Watermark:** Gemini sparkle bottom-right - strip with
`bztmon-site/scripts/dewatermark.mjs` before slicing.
+56
View File
@@ -0,0 +1,56 @@
# Scene prompt - Course IV: the traffic (pods are cattle, Services are the brand)
v2 diagram: client -> LB -> Ingress -> Service VIP -> ready pod in the pool, not-ready
pod silently removed. "Readiness decides membership - traffic follows." Six parts.
Generate ~4 at 16:9, curate with the reject checklist, save to disk for pickup.
---
Dark technical exploded-view illustration in a cinematic sci-fi engineering style.
Solid near-black deep void background, hex #070b14 - completely clean: no stars, no grid,
no texture, no particles behind or around the objects. Matte dark metal-and-glass surfaces
with glowing neon edge lighting: primary cyan #3fbaf5, secondary magenta #e879f9 accents,
cool white rim highlights. Camera: fixed 30-degree isometric angle, subject perfectly
centered with generous empty margins on all sides. Even studio lighting, no vignette,
no lens flare, no depth-of-field blur. ABSOLUTELY NO text, no letters, no numbers, no
words, no code, no glyphs, no labels, no arrows, no callout lines, no UI elements
anywhere in the image - every surface marking must be an abstract geometric pattern
only. Every component is fully separated from its neighbours by generous gaps of pure
void - nothing touching, nothing overlapping, and no beams, cables, or connectors
spanning between the separated parts.
The subject: six objects arranged in a gentle descending arc from upper left to lower
right, a delivery route pulled apart into its checkpoints, each floating alone in void.
First, upper left: a small smooth luminous white-cyan orb, simple and organic against
all the machinery, clearly the visitor of the scene.
Second: a wide flat splitter wedge of dark metal, its leading edge glowing cyan and its
trailing edge fanning into several subtle facets, built to divide incoming flow.
Third: a tall thin archway frame of dark metal - an open rectangular gate with a cyan
glowing inner rim and nothing inside the opening.
Fourth, centre of the scene: a floating faceted prism of dark glass with a strong steady
cyan core glow, the calm fixed point of the whole composition.
Fifth, lower right: a sealed pod capsule - a smooth dark pill shape with a healthy bright
cyan glow and crisp edge light, solid and present.
Sixth, drifting below and away from the arc: an identical pod capsule but dim - its glow
faded to a weak grey-magenta ember, tilted, clearly falling out of the formation.
---
## Build-side notes (not part of the prompt)
- **Slice plan:** 6 polygons - client orb, LB wedge, Ingress arch, Service prism, ready
pod, not-ready pod. Collapse packs the arc into a tight column behind the prism; scrub
opens the route. The not-ready pod's travel is the teaching beat: it exits the
formation as the legend hits "readiness decides membership". Clamp at hero.
- **Legend mapping (v2 terms):** client / LoadBalancer "at the edge" / Ingress or Gateway
API "host- and path-routing" / Service VIP "the stable name in front of the churn" /
pod ready "in the pool" / pod not ready "silently removed". Field note: "the network
is broken after a deploy is usually readiness telling the truth".
- **Watermark:** Gemini sparkle bottom-right - strip with
`bztmon-site/scripts/dewatermark.mjs` before slicing.
+60
View File
@@ -0,0 +1,60 @@
# Scene prompt - Course V: OpenShift (a ring of opinions around the same core)
v2 diagram: the preserve-3d orbit - KUBERNETES CORE circled by SCC / Routes / Operators /
oc + console / MachineConfig / SNO. Seven parts.
Generate ~4 at 16:9, curate with the reject checklist, save to disk for pickup.
---
Dark technical exploded-view illustration in a cinematic sci-fi engineering style.
Solid near-black deep void background, hex #070b14 - completely clean: no stars, no grid,
no texture, no particles behind or around the objects. Matte dark metal-and-glass surfaces
with glowing neon edge lighting: primary cyan #3fbaf5, secondary magenta #e879f9 accents,
cool white rim highlights. Camera: fixed 30-degree isometric angle, subject perfectly
centered with generous empty margins on all sides. Even studio lighting, no vignette,
no lens flare, no depth-of-field blur. ABSOLUTELY NO text, no letters, no numbers, no
words, no code, no glyphs, no labels, no arrows, no callout lines, no UI elements
anywhere in the image - every surface marking must be an abstract geometric pattern
only. Every component is fully separated from its neighbours by generous gaps of pure
void - nothing touching, nothing overlapping, and no beams, cables, or connectors
spanning between the separated parts.
The subject: one radiant core with six distinct satellite modules spaced evenly around
it in a wide ring, every object floating alone with generous void between all of them.
Centre: a glowing reactor core - a faceted geodesic sphere of dark glass panels with
intense cyan light burning through the seams, the unmistakable heart of the system.
Around it, six satellites, clockwise from the top, each a different silhouette but the
same material language of dark metal with neon edge light:
A raised angular shield plate with a strong magenta rim glow, defensive and imposing.
A miniature gate arch, a thick open doorframe with a cyan inner glow.
A cluster of three interlocking rings, gear-like, with soft cyan edges, mid-rotation.
A slim handheld slab like a thin console tile, its face lit with a faint abstract cyan
lattice.
A neat stack of three rigid rectangular plates with amber-white edge seams, immutable
and orderly.
A single compact rugged box - small, dense, self-contained, with one bright cyan seam,
clearly an entire machine shrunk into one unit.
---
## Build-side notes (not part of the prompt)
- **Slice plan:** 7 polygons - core + 6 satellites. Collapse pulls the ring radially
into the core (the distribution wraps the engine); scrub expands to the hero orbit.
Radial in-out only - no lateral orbiting motion in v3 (that was v2's spin; slices
cannot orbit without exposing bites). Clamp at hero.
- **Legend mapping (v2 terms):** Kubernetes core "same engine underneath" / SCC shield
"admission: what a pod may BE - restricted-v2, random non-root UID" / Routes arch
"L7 exposure, pre-Ingress" / Operators rings "OLM - the platform runs itself" /
oc + console tile "kubectl, extended" / MachineConfig stack "immutable OS, declared
changes" / SNO box "the whole cluster on one edge box".
- **Watermark:** Gemini sparkle bottom-right - strip with
`bztmon-site/scripts/dewatermark.mjs` before slicing.