Interactive explainers · Case study
The bolt that was fine until it wasn't.
A hydrogen-embrittled fastener passes every external inspection right up to the moment it fails. That is what makes it dangerous, and it is what a static diagram cannot show. So I built one you can pull apart.
The whole argument is that one panel never changes
Hydrogen collects at the first engaged thread root under load. It is invisible from outside. The failure gives no warning, which is exactly why suspect parts get baked in an oven rather than inspected.
So the piece makes a promise and then keeps it mechanically: whatever the hydrogen is doing, the exterior panel is pixel-identical. That is not a claim in the copy. It is an assertion in the test suite, and it fails the build if it ever stops being true.
Method
Not a linear build. A loop, run until the picture stopped getting better — and the numbering here is the real sequence, not decoration.
Render it and look at it honestly
At the size it will actually be embedded, on an ordinary screen. Five separate "defects" this project chased turned out to exist only at 3–4× zoom.
Measure the thing you think is wrong
Before touching it. Roughly half the time the measurement refuted the complaint and the fix was never written.
Fix the single worst thing
One change, one reason, one commit message that records why — including the alternatives that were built, measured and rejected.
Prove it with an instrument that can fail
Every negative control in the suite is itself tested: the watertightness check punches a deliberate hole and asserts that it sees it.
Run the whole gate, then commit
Seven suites. A change that improves the picture and breaks the physics is not an improvement.
Five things I got wrong
Every portfolio shows the finished thing. Here is the part that actually tells you whether the engineering is honest — each of these shipped wrong, and each was caught by an instrument rather than by an opinion.
The loaded bolt was drawn already severed
Elastic stretch was applied as a rigid translation, which opened a void exactly at the plane where the crack would later run. The piece's entire argument is that the failure gives no warning — and the picture was previewing it on every loaded frame.
Caught by walking a line down the section and asking the DOM what bounded it: black-run columns went 9 → 78 as load rose.
A note in my own file said not to look here
A comment recorded that splitting the plate's side faces had been measured worse. It had — by an instrument of mine that counted correct occlusion as error and used a tolerance five hundred times too loose. Three independent audits disagreed with it and I sided with my own bad number.
Caught by ray-casting true depth at the contested pixel: the plate is at 1.545, the washer painted over it at 1.707.
The seam stroke was specified in the wrong units
Every polygon strokes itself to close the antialiasing gap at shared edges. The width was in model units, so at real embed size it rendered 0.43 of a pixel and closed less than half the gap. The bolt head read as a fluted drum.
Caught by judging at ordinary pixel density — at 2× the defect is nearly absent, which is how it survived so long.
The node pool was silently dropping the front of the picture
The SVG node pool stops at its end, and the primitive list is sorted back to front — so overflowing discarded the nearest geometry, in silence. The comment beside it named that exact risk and had gone stale as the model gained detail.
Caught by a sweep that cracks the bolt at its most expensive angle: demand peaks at the crack moment, not at rest.
Breaking the bolt turned the surviving thread to chalk
At fracture the whole lower half swapped to the crystalline material so the crack face could shine — taking the exposed thread stub, still machined steel, with it. The payoff frame was the one that looked worst.
Caught by an exact geometric mask: the stub's highlight tail collapsed from p90 79 to 45 and its relief halved.
What it does when it breaks
There is no countdown and no warning colour. The break is sudden because the failure is sudden, and the recovery afterwards is deliberately slow and partial — a rested part is not a safe part.
Built to drop into your site
| Delivery | one .html file |
| Dependencies | none |
| Network requests | zero |
| Rendering | software 3D → SVG |
| Size | 298.0 KB |
| Responsive | 320–2560 px |
| Reduced motion | respected, payoff still reachable |
| Assistive tech | the drawing is an input, not a picture |
| Numbers on screen | none, by design |
No WebGL and no canvas: it is polygons projected by hand into SVG, so it renders on integrated graphics and degrades predictably. Paste the marked region into a CMS block, or serve the file as-is.
What is not verified
Stated plainly, because a piece whose value is trustworthiness should not overclaim. The first list is the part that would change how you read the result. The second is scope — true, worth saying, and not load-bearing.
- An audit, which is not a review.
audit.pyin the source re-derives every piece's central claim from published references and re-does each closed form numerically, then corrupts a constant at a time to prove it can still fail. It checks the arithmetic and the constants. It cannot tell you the relation is the right one for your problem. - No human engineer has reviewed the physics. Proportions were checked against ISO metric coarse practice and the joint mechanics hold up, but that check was mine. Before this ships as authority, it wants a metallurgist's eye.
Scope, for completeness. True of the model, and none of it changes the answer above.
- The sound path is measured on one browser engine. Chromium here; the audio is opt-in and the piece is complete without it.
- Frame budget is measured in a software rasteriser, which is slower than the integrated graphics it targets — so the numbers are a floor, not a forecast.
What I would build for you
The subject changes; the method does not. If you have a failure mode, a mechanism, or a process that people keep getting wrong because the diagram cannot move — that is the shape of problem this suits.
You get one file, the test suite that holds it honest, and the notes explaining every decision including the ones that were reversed.
What it costs. Commissions start at £4,000. Where a piece lands above that depends on how much of the physics has to be established from scratch: a mechanism with a published closed-form solution is a different job from one that needs a model built and validated before anything can be drawn.
How long. Three to four weeks from an agreed brief — roughly a week establishing the model and checking it against published values, a week building the thing, and the rest on the check suite, the keyboard and screen-reader work, and one round of revisions.
What you get. The single HTML file, which you can host anywhere or send as an attachment. The checks that hold it honest, which run inside the page. The notes explaining every decision including the reversed ones. And the disclosure of what has not been verified, which stays on the piece.
What happens first. You send the failure mode. I tell you whether it suits this treatment — some do not — and saying so in the first week is cheaper for both of us than discovering it in the third.
Email me → Pull the bolt apart →
Not commissioning anything? A correction is just as welcome: if something here is wrong, or the physics does not match what you see in the field, tell me in one line.
Jeremy Wang · yinxueshi1017@gmail.com · other pieces