The Exploded Cluster

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.