The Struck Ingot
An object with no vertices — a signed distance field marched per pixel, with the step budget exposed so the exact moment quality is bought back is visible.
Hector: Solid, honourable, high-craft work.
Exhibit case
Why it matters
There is no model here. No vertices, no indices, no glTF, no loader, no asset request. The object is a mathematical description of distance to a surface, and the image is produced by walking a ray from the eye until it converges. The silhouette is therefore exact at every scale, and the entire "geometry" ships as roughly forty lines of shader inside the existing bundle.
Raymarching is also, reliably, where a portfolio stops being shippable — because the cost is per pixel and the default step count is chosen by copying someone else's demo. So the dial here is the actual subject. At 24 steps you can see the silhouette fray where rays graze tangentially, since each one runs out of budget before it converges. At 96 it is exact and the frame cost roughly doubles. 56 is the shipped figure, and it was chosen by reading the meter, not by taste.
Key techniques
- Sphere tracing. Each step advances by the distance to the nearest surface, so rays far from the object take enormous strides and only converge slowly where they must. This is what makes the technique viable at all.
- Polynomial smooth minimum to union the torus and the bar. A hard
min()gives a union that looks glued;sminwithk = 0.34gives a fillet, and the fillet is the difference between a diagram and an object. - Displacement scaled below the Lipschitz bound. The hammer marks subtract
fbm * 0.055from the field. Displace harder and the distance function starts lying about how far the surface is, rays overshoot, and the surface tears — the exact artefact most raymarched demos ship with. - Step-count early exit at
d < 0.0016and a far cutoff att > 9.0, so background pixels cost almost nothing. - Accumulated proximity as forge glow. Rays that miss are not wasted work: their closest approach accumulates into a volumetric term, which buys atmosphere from computation already spent.
- Central-difference normals at
0.0018, tuned against the displacement amplitude. Too tight and the normals sample the noise as cliffs; too loose and the hammer marks vanish. - Harder DPR clamp than anywhere else in the building —
1.25, because a screen-space marcher is fill-bound and pixel count is the only variable that matters. - oklch → sRGB conversion inside the shader, so the metal is lit in the same colour space the stylesheet uses and the chamber hue reaches the GPU as a single number.
What to steal
The transferable part.Treat the step budget as a published number, not a constant. Put it on a dial, put the frame time next to it, and pick the value in front of the readout. This is the whole discipline of shipping a marcher.
Keep displacement under the bound. If your marched surface tears or flickers at grazing angles, the fix is almost never more steps — it is less displacement, or a smaller step multiplier (d * 0.92 here).
Spend the misses. Accumulating inverse distance along a ray gives you glow, fog and soft light out of the traversal you already performed.
Use `smin`, and choose `k` deliberately. The join radius is a material decision. It is the difference between two primitives sitting next to each other and one forged object.
Convert from your design system's colour space in the shader. A shader that hardcodes RGB is a second, undocumented palette.
What not to copy
Context-specific or costly.Do not put a full-viewport marcher behind your hero. This one is deliberately a bounded 1200/720 plate inside a document, and even then it is capped at 1.25 DPR. Full-bleed, at native density, on a phone, is a thermal event.
Do not add primitives casually. Every one is evaluated at every step of every ray — the cost is primitives × steps × pixels. Two is a considered number, not a starting point.
Do not raise the step count to fix banding or aliasing. Those are output and normal-sampling problems, and they have cheap fixes; steps are the most expensive lever you have.
Do not use the cheap tier as a mobile fallback and call the job done. 24 steps is shown here as evidence of what breaks, not as a shipping tier. The real fallback is the CSS forge light, which is composed to stand on its own.
Inclusion rationale
Included as the counterweight to The Instanced Forge. That entry argues geometry should be structured so the CPU stops caring how many objects there are; this one argues some objects should not be geometry at all, and then shows the precise price of that choice on a dial. Hector rather than Achilles because the technique is narrower — most production work will not ship a marcher — but the discipline it demonstrates, choosing quality settings in front of a meter and keeping displacement inside the bound the algorithm assumes, transfers to every shader anyone here will write.
Technical register
Performance
One triangle, one program, no depth buffer, no render targets, no post chain. The dominant cost is fill: at the shipped budget the inner loop runs at most 56 iterations per pixel, and the early exit means converged and background pixels leave long before that. Device pixel ratio is clamped to 1.25 — the tightest ceiling in the building — and the loop is paused by IntersectionObserver and visibilitychange. Changing the step dial re-arms the stage rather than branching inside the shader, so the compiled program stays free of a dynamic loop bound the driver would have to guard. ogl arrives through a dynamic import after first paint and is never part of SSR or the initial bundle.
Mobile
The plate is fixed-ratio and crops rather than reflows. Pointer input only nudges the camera origin and the object's tilt, so on touch the object simply rotates on its authored path — no gesture is required and none is hijacked from the scrolling page. At 1.25 DPR a modern phone renders roughly the same pixel count as a 1x laptop, which is the point of the clamp. When no context is available the radial forge glow underneath carries the frame alone.
Accessibility
prefers-reduced-motion composes a single frame at a fixed time offset — the object is shown at an authored angle and held there, which is exactly what a specimen photograph would do. The canvas is aria-hidden, and every claim the plate demonstrates is also stated in the readout and in this prose. The step-budget control is a real radio group with arrow-key traversal and a visible focus ring, and it is operable and meaningful even if the canvas never renders — it is labelled with the numbers themselves rather than with "low / medium / high", so the trade is legible without seeing it.
Study next