boot
'; + 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))); })(); diff --git a/prompts/02-course-00-terminal-surround.md b/prompts/02-course-00-terminal-surround.md new file mode 100644 index 0000000..79be668 --- /dev/null +++ b/prompts/02-course-00-terminal-surround.md @@ -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. diff --git a/prompts/03-course-II-cluster-split.md b/prompts/03-course-II-cluster-split.md new file mode 100644 index 0000000..7d9ec31 --- /dev/null +++ b/prompts/03-course-II-cluster-split.md @@ -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. diff --git a/prompts/04-course-II-control-plane.md b/prompts/04-course-II-control-plane.md new file mode 100644 index 0000000..39e8f18 --- /dev/null +++ b/prompts/04-course-II-control-plane.md @@ -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. diff --git a/prompts/05-course-III-node-chain.md b/prompts/05-course-III-node-chain.md new file mode 100644 index 0000000..4b6d56f --- /dev/null +++ b/prompts/05-course-III-node-chain.md @@ -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. diff --git a/prompts/06-course-III-pod-capsule.md b/prompts/06-course-III-pod-capsule.md new file mode 100644 index 0000000..2a6d5e9 --- /dev/null +++ b/prompts/06-course-III-pod-capsule.md @@ -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. diff --git a/prompts/07-course-IV-traffic-path.md b/prompts/07-course-IV-traffic-path.md new file mode 100644 index 0000000..b366296 --- /dev/null +++ b/prompts/07-course-IV-traffic-path.md @@ -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. diff --git a/prompts/08-course-V-ocp-orbit.md b/prompts/08-course-V-ocp-orbit.md new file mode 100644 index 0000000..8720ec1 --- /dev/null +++ b/prompts/08-course-V-ocp-orbit.md @@ -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.