Explain a cache key with a pin-tumbler lock

What it does

Ask your agent to explain a concept and, instead of a bullet list, Anatomy invents a physical object whose operation is the concept — a token bucket becomes a real tank draining at a fixed rate, a cache key becomes a pin-tumbler lock that only turns when every pin matches. It then builds that object from dozens of small, shaded isometric parts in SVG, framed in a card with a title, hint, and live readout, and makes it respond to pointer and keyboard. It runs as a Claude Code skill, and also works in OpenCode and Codex.

The interesting bit

The figures aren’t static diagrams: every number shown comes from the same small model that moves the parts, and the skill checks its own work by zooming in on every joint with headless Chrome. For things lines can’t draw — fire, water, caustics — a WebGL shader runs in a canvas sandwiched between SVG layers, in the figure’s own isometric camera, so the plume genuinely sits inside the drawing.

Key highlights

• Three figure kinds: pure SVG, SVG + WebGL for fluids and light, and a beta 3D mode where moving parts are re-projected and re-shaded every frame
• Ships as standalone HTML, a lone .svg with embedded styles, or React/Next.js components
• Zero dependencies — Node built-ins only, no API keys
• Built pages are committed in examples/, so you can open any .html and try it
• Self-auditing: the Raptor engine example proves no pipe passes through anything, at rest, apart, and in every frame between

Caveats

• The 3D mode is explicitly beta
• Under Codex, the sandbox may block the headless-Chrome self-checks; the figure still gets built, only verification fails
• The skills CLI copies the whole repo including examples (~10 MB)

Verdict

Worth a look if you explain systems for a living — docs, teaching, design reviews — and are tired of arrows-in-boxes diagrams. If you just want a quick chart, it’s a very elaborate hammer.