Behind
the loupe.

The Nib Works is a fictional Birmingham atelier founded in 1911. Its interface treats tiny measurements as emotionally significant. A large serif voice gives the craft history and romance; narrow technical labels, hairline rules, inspection marks, and ledger entries bring precision. The layout alternates blotter cream with royal-blue inspection rooms, so the visitor moves between paper and the optical darkness beneath a loupe.

The hero avoids a conventional product photograph. Its nib is a layered inline SVG, built from gold and steel gradients, engraving, a slit, breather hole, and measured loupe surround. Hovering subtly straightens the nib, as if the craftsperson has brought it into alignment.

The signature writing pad is implemented in main.js. Pointer Events unify mouse, touch, and stylus input. move() calculates velocity from distance and elapsed time, then combines it with stylus pressure and stroke direction. Each nib in the nibs object has a base width, flex factor, and edge angle. EF remains disciplined; Medium shades at low speed; Flex widens on downward movement; Stub fills an angled broad-edge quadrilateral for italic character.

drawSegment() renders the live mark. It adds a pale highlight and ink-colored shadow while a stroke is fresh, creating wet sheen. Fast, highly spread Flex strokes split into two fine tracks: intentional railroading that makes the feed limit visible. Four inks supply separate body and sheen RGB values, so Verdigris, Garnet, Oxford Night, and King’s Ultramarine do not merely recolor the same flat line.

Bench assist filters micro-jitter in move() while preserving pace, pressure, and direction. Pass three turns those stored measurements into a private fitting: inspectSignature() reads width variance, downstroke share, speed, railroading, and direction, then reveals a bespoke grind prescription beside the visitor’s actual canvas specimen. Marks remain vector-like records, so resize() can scale and repaint a signature cleanly.

Built atmosphere

Every object is code: SVG anatomy, CSS grinding wheels, slit gauges, sparks, ruled paper, technical callouts, and diagnostic cross-sections. The fixed grain layer uses an inline SVG turbulence filter. Motion is limited to the load reveal, tool rotation, hover alignment, and direct writing response. Reduced-motion CSS collapses animation, while the only requestAnimationFrame cycle pauses when the document is hidden.

Instrument Serif carries display lines at compact leading and slightly negative tracking. Manrope handles every annotation, control, and paragraph; its technical clarity makes the serif feel more precious. Both are self-hosted from the shared font library.

Give an AI agent a physical craft, a dominant workspace metaphor, exact materials, and one interaction that demonstrates the craft instead of describing it. Ask for all visuals to be native HTML, CSS, SVG, or Canvas. Demand that options change the underlying behavior, not merely labels.