Panelcraft is one of twenty-five sites in a series showing what a careful designer-builder can do with plain HTML, CSS, and JavaScript. This page documents the concept, the system, and the techniques — in the site's own design language.
An independent body shop that treats collision repair as restoration craft, aimed at people who love their cars and dread body shops. The page's one job: turn "insurance errand" into "leave it with the artisans," with a single CTA — request an estimate.
The art direction borrows the shop's own vernacular: the repair order. Stage numbers, torque-spec typography, masking-tape annotations, and micron counts aren't decoration — they're the honest structure of how a real repair is documented. Structure is information.
Alfa Slab One carries the headlines — a confident, single-weight slab with the swagger of a die-stamped shop sign. Everything else is the Saira family, a DIN-flavored industrial sans: regular widths for body copy, Saira Condensed letterspaced and uppercased for the job-ticket labels, specs, and stamps. The pairing is loud where the brand speaks and technical where the shop does.
Candy red is rationed. It appears as the CTA, the hover state on stage numbers, the midcoat layer, and the entire estimate section — so by the time you reach the bottom, red means "paint" and "go" and nothing else. Masking-tape blue is reserved for annotations: the things a painter would actually tape to the car.
The peelable paint system (signature). The cross-section is a single empty <svg>; JavaScript builds six isometric slabs from a data array — each layer is three <path> faces (front, side, top) computed from a shared depth vector, appended bottom-up so painter's order stacks them correctly. Peeling is one CSS class:
// each slab = 3 faces sheared by the same depth vector (DX,DY) mk(`M${X0},${yT} h${W} v${L.h} h${-W} Z`, L.front); // front mk(`M${X0+W},${yT} l${DX},${DY} v${L.h} l${-DX},${-DY} Z`, L.side); mk(`M${X0},${yT} h${W} l${DX},${DY} h${-W} Z`, L.top); /* peeling = a transform, so the browser animates it for free */ .peel-layer.gone{ transform:translate(60px,-150px) rotate(6deg); opacity:0; }
State is a single integer — how many layers are peeled from the top. The SVG slabs, the layer-list buttons (aria-pressed marks the exposed layer), and the live "film build above steel" micron counter all render from it.
The candy chip. A canvas with 2,400 precomputed "flakes," each with a random orientation. Pointer position becomes a viewing angle; each flake's brightness is cos(orientation − angle) raised to a high power, so individual sparkles fire and die as you sweep across — the way real metal flake behaves under booth lights. The body color's hue and lightness also travel with the angle (candy goes orange-red face-on, crimson off-angle).
const fire = Math.pow(Math.max(0, Math.cos(f.ph - view*1.6 + (f.x/CW-.5))), 14);
ctx.fillStyle = `hsla(${warm} 100% ${72+fire*26}% / ${0.25+0.7*fire})`;
The before/after slider. Both panels are the same hand-drawn SVG quarter-panel path, so alignment is perfect by construction: "before" is a primer-grey damage map with tape-blue dimension callouts; "after" is a candy gradient with an feTurbulence flake speckle and a gloss sweep. The reveal is clip-path: inset(0 0 0 var(--cut)) driven by an invisible full-size <input type="range"> — which makes dragging, clicking, touch, and arrow keys all work with zero custom pointer math.
Photography. The three photographs (spray booth, prep bay, flake macro) were generated with gpt-image-2 from written photographic briefs (lens, film stock, light), then compressed to JPEG. Everything else on the site is code: SVG, canvas, and CSS.
Killed a mobile horizontal overflow caused by the header CTA, added a safety net so scroll-reveals can never leave sections blank, and confirmed both pages capture with zero console errors.
Retuned the candy chip — finer flake, a fixed strip-light reflection, a brighter face-on body — grounded the cross-section with a bench shadow, fixed unreadable sub-copy on the dark sections, gave the slider a resting cut that shows the damage map, and drew a tire into the wheel arch.
Chanel rule: removed a duplicated caption under the cross-section, calmed the tape-chip rotation, gave the invisible range slider a visible focus ring, and verified the reduced-motion path renders everything static but complete.