Billet — A Machine Shop Website That Answers "Will It Fit?"

Role: Product design, UX/UI, Framer development Type: Self-initiated template, free on the Framer Marketplace Timeline: October–November 2026

Engineers don't browse machine shop websites for inspiration. They arrive with a drawing and one question: can this shop make my part?

Most shop sites answer with a list of machines and a contact form. The engineer has to read spec sheets, work out the travel on each machine, and then email to ask anyway. That's the moment a lot of enquiries quietly die.

Billet is a Framer template built to answer that question in the first screen.

The first version I built looked like every other industrial template: dark hero, stock photo, service cards. It was polished and completely forgettable, so I threw it away.

I started again from one idea: the site is the drawing. Engineers live in technical drawings, so the visual language came from them: title blocks, dimension lines, a measuring scale, sheet numbers. Then I set three rules:

Show real numbers, like machine travel, tolerances and batch sizes, instead of adjectives.

Make the enquiry carry the work, so nobody types the same thing twice.

1. A fit checker as the hero. Visitors type the length, width and height from their drawing and pick a machine. The part is drawn to scale on that machine's bed, with a height gauge beside it, and the verdict updates as they type, including how many machines on the floor can take the part. Trade-off: it's a code component, which is harder for buyers to edit than native layers. So every machine, bed size, label and colour is exposed in Framer's properties panel, and the colours are linked to the site's colour styles.

2. The enquiry carries the part. Press "Send this part" and the size and machine travel with the visitor. The nav button changes to "Send 320 × 180 × 60", and the quote form opens with the size already filled in. The engineer only adds a drawing link and a quantity.

3. Navigation as a title block. Every link shows a small fact underneath: "6 on the floor", "ISO 9001 · AS9100D", "Coventry, UK". A measuring scale under the bar tracks your scroll and marks each section. On phones it becomes a dark full-screen menu with the main call to action at the bottom.

4. Proof engineers actually check. Instead of "precision engineering", the Quality section shows a sample first-article inspection report: features, nominal sizes, tolerances, measured values. Capabilities are laid out as numbered drawing sheets with materials, max part size, tolerance, batch and lead time.

A template gets judged twice: by the visitor, and by whoever has to edit it.

Colours, type and spacing run on styles. The custom code uses the same colour styles, so a rebrand happens in one place.

Parts and Machines live in the CMS. Each part gets its own page with the brief, material, process, batch and tightest tolerance.

Layers and sections are named in plain language ("01 Hero" to "09 Send a drawing").

A "Start here" page inside the project walks through brand, shop details, machines, content and what to check before publishing.

Motion respects reduced-motion settings.

Honest limits: the fit checker's machine list and the Machines CMS are edited separately, the quote form needs connecting to an email or webhook before launch, and drawings are shared as a link rather than uploaded.

Billet is live on the Framer Marketplace as a free template, the fourth and last of my October template sprint. It's self-initiated, so there are no client metrics yet. Next, I want to see how real shops adapt the fit checker to their own machines.

What it shows is how I like to work: find the one question a visitor arrives with, build the site around answering it, and make sure the next person can actually edit what I made.

Live demo: billet.framer.website Template: Framer Marketplace