No client, no brief — a lab piece. A steel column-and-beam connection with a damper head, built as a single interactive SVG that assembles itself from its own exploded parts. This is the kind of thing we build when we're testing what a technical explainer can be on the web.
It auto-cycles between assembled and exploded on its own. Use the controls to hold a state, or hover a row in the parts list to trace that part through the model.
A steel corner column with two beams bolted to end plates on its faces, and a viscous damper unit at the column head — shown assembling from its exploded parts. Hover any item in the parts list to trace it in the model.
The whole scene is a flat SVG. Every part is a box drawn as three parallelograms on an isometric projection, sorted back-to-front once. No WebGL, no Three.js, no canvas — it renders the same on a five-year-old phone as on a workstation.
Each part knows two positions: seated, and pushed out along its own axis. Toggling a single boolean animates every piece between them with a CSS transition — so “explode”, “assemble” and the idle auto-cycle are all the same three lines of code.
Hovering a row in the bill of materials highlights every matching piece in the drawing — the column, both beams, every bolt. It reads like an engineering sheet, but you can poke at it.
Respects reduced-motion (renders exploded and still), follows light/dark, scopes all its styles so it can drop into any page, and ships with zero runtime dependencies beyond React.
A lot of what a business needs to explain — a product, a process, a piece of machinery — dies in a flat diagram or a stock render. Something you can take apart and put back together holds attention and gets remembered. These experiments are how we work out what's cheap to build, what performs on a phone, and what's actually worth the effort — before a client pays for it.
Book a free 30-minute call. Bring the thing you keep struggling to show people, and we'll tell you what an interactive version would take.