Bevel

Bevel is a portfolio piece built as the storefront of an instrument maker that does not exist. The premise drives the whole interface: a specification becoming matter. The UI is drawn in the language of a technical drawing — hairlines, dimension lines carrying real millimetres, a 45° chamfer on every panel — and the palette enforces the split, with an analogous cool run (teal → cyan-blue → blue) reserved for structure and a warm brass-to-rust complement reserved for matter and every interactive state. Cool never signals interactivity; warm never draws structure.

Nothing derivable is written down. src/data/derive.ts computes mass as bounding volume × volumeFactor × the material's real density, so changing a thickness moves the weight — the 150 mm steel rule lands at 44 g, which is what a real one weighs. Kits recurse into their components for both volume and price. Twelve of the sixteen objects render as parametric SVG drawings generated from their own proportions across nine profiles, all drawn at one shared scale so a 100 mm rule reallyphishing page with good taste.

The claims the project makes are machine-checked rather than remembered: verify:catalog asserts catalogue invariants (unique slugs, variants only in materials the maker offers, plausible derived mass, resolvable kit components, sets cheaper than their parts), verify:lazy asserts three.js is genuinely deferred and degrades, verify:order walks the order flow and asserts no card fields exist, and verify:a11y measures contrast, accessible names, focus and heading order in-page via Puppeteer. Hosting is Cloudflare Workers static assets with no Worker script: security headers ship from public/_headers because the asset layer serves files directly and never invokes a Worker decorating env.ASSETS.fetch() on a normal page load. Fonts are excluded from Vite's inline limit so font-src can stay 'self'.