---
title: "The Exploded Cluster"
outcome: "A scroll-driven teaching site that takes container platforms apart one machine at a time."
summary: "A single-page course on how Kubernetes and OpenShift delivery actually works - each subject drawn as one exploded illustration, sliced into its real components and wired to the scroll, then shipped through the same GitOps and CSP discipline as the rest of the estate."
role: "Author / Engineer"
period: "2026"
stack: ["Dependency-free static build", "GSAP ScrollTrigger", "Strict CSP", "Cloudflare Tunnel", "Argo CD", "zot mirror"]
featured: true
order: 25
cover: "exploded-cluster"
links:
  - label: "learn.bztmon.com"
    href: "https://learn.bztmon.com"
---

## Problem

Container platforms are usually taught as bullet points. A reader finishes knowing the nouns -
kubelet, CRI, Service, chart - without a mental model of how the parts sit together or which
one owns which job. I wanted the opposite: a page where the machine comes apart in front of
you, and the words explain the piece you are looking at.

## Constraints

- **One page, no framework.** The site is a static artefact - no React, no client router. The
  animation engine and the content build had to be hand-rolled and small enough to reason about.
- **Same security posture as everything else.** `script-src 'self'`, no inline JavaScript, no
  third-party origins - which rules out most off-the-shelf scroll libraries and every CDN.
- **The illustrations are raster.** Each scene is a single generated image, not an SVG scene
  graph, so "exploding" it means slicing one bitmap into polygons rather than moving vectors.

## Design

Each subject is one image, cut into per-part polygons with `clip-path`. Every slice is an
absolutely-positioned layer showing the same bitmap through a different window, so the scene
reassembles pixel-exact. Scroll position drives a pinned timeline that translates the slices
between a collapsed stack and the exploded layout.

The parts also carry hidden edges where they overlap in the source art, which constrains the
motion: rotate or fan a slice on a scene where parts overlap and you expose the concealed cut.
Scenes whose parts are already separated take a richer signature - a tumble, a bowed arc, a
spiral orbit - and the rest keep a straight translate. The difference reads as deliberate
rather than repetitive.

The legend beside each scene is wired to the parts. As the scroll advances, the component being
described holds full strength while the others sit back, and hovering or keyboard-focusing a
row pins the link to that part - so what you are reading and what is lit are never different
things.

## Security and reliability decisions

- **No inline script.** The engine is split into a fingerprinted external bundle at build time,
  and a preflight gate fails the build if an inline `<script>` survives.
- **Every asset content-fingerprinted.** An earlier revision served a fresh HTML file against a
  cached older script and the animations silently died for anyone with a warm cache. Hashing
  every asset makes that pairing impossible.
- **Digest-pinned delivery.** The image is built once, pushed through the local zot mirror, and
  referenced by digest in the deployment repo; Argo CD reconciles it. Exposure is a Cloudflare
  Tunnel, so the origin has no inbound WAN port-forward.
- **Reduced motion is a branch, not a bolt-on.** Under `prefers-reduced-motion` the scroll
  scenes render their end state immediately and the parallax backdrop is disabled outright.

## Outcome

The course runs from what an image is through to how a change reaches a fleet, with the
architecture moving while the words explain it. Layout and motion are verified with headless
browser passes rather than by eye - scroll samples across desktop and mobile widths checking
that no pinned scene overlaps the prose beneath it.

## Future improvements

A storage chapter - PersistentVolume, claim and StorageClass are the obvious gap in the current
arc - and a pass that lets a reader jump straight to a single machine rather than scrolling the
whole menu.