Mechoryx, a CAD Studio Site Built Like a Drawing Sheet by Muhammad Issa UmerMechoryx, a CAD Studio Site Built Like a Drawing Sheet by Muhammad Issa Umer

Mechoryx, a CAD Studio Site Built Like a Drawing Sheet

Muhammad Issa Umer

Muhammad Issa Umer

Mechoryx

Designed and built by me in Next.js, with three.js for the 3D hero and GSAP for the motion.
Mechoryx turns sketches, photos and broken parts into 3D CAD a machine shop can build from. The client base is split between engineers who know exactly what they want and people carrying an idea they can only describe with their hands, which is an unusually wide gap for one site to serve.
The interface resolves it by borrowing from the deliverable. Sections are numbered 01 through 06 like sheets, projects carry drawing numbers, RB-01, MD-01, RE-01, coordinate readouts sit under renders, and a tolerance display ticks between +0.02 and -0.02. An engineer reads that as familiar. A non-engineer reads it as precise. Neither is put off, and the same visual language works for both.
Commercially the site publishes everything that usually requires a call. Fixed price before work starts, three revision rounds included, you own every file with no licence back, NDA the same day on request, and turnaround bracketed at 3 to 7 days for a single part and up to 5 weeks for a full assembly. Dark ground, monospaced detail type, and restraint everywhere the work itself needs space.

Home

Opens on the promise in plain words, if you can describe it, we can draw it, with one of the studio's own models in the hero, built in three.js, that visitors can drag to turn on desktop and phone. Then it goes straight to work rather than credentials. Five selected projects, from a walking robot to a hair dryer, deliberately showing range that would look scattered anywhere else and reads as versatility here.
The measured section is the standout. Three hundred squares, one for each project delivered since the studio started, with the twenty-four published on the site marked in red. It makes the difference between what has been done and what can be shown visible in one glance, which is a problem every studio under NDA has and almost none solve. A tolerance readout and a material note sit beside it.
Below that, an interactive three-stage explainer runs one ring gear assembly from sketch through parametric model to dimensioned drawing, with hover to redraw each stage. Then six sectors, then the full terms.
hero, the 300-square grid, and one stage of the ring gear explainer

Work

The archive, twenty-four projects filtered by six sectors, medical, robotics, reverse engineering, large-scale R&D, home and furniture, and sports and toys. Every project carries a drawing number and a sector code, so the index reads like a drawing register rather than a gallery.
Filtering by sector matters here more than on most portfolio sites, because a medical device client and a furniture client are looking for completely different evidence and neither is reassured by the other's work.
the filtered archive with sector codes visible

Project pages

Each project runs the same structure: hero render with a coordinate overlay, a spec block, then brief, approach, result in three numbered sections. The spec block is the part that earns trust, drawing number, sector, type, what it started from, and exactly what was delivered, STEP, native, 2D drawings, BOM.
Started from is the cleverest field on the page. Seeing an ideas-only start produce a full mechanical assembly tells a visitor with nothing but a description that they are not too early. Every project also carries a start something similar button that passes its drawing number through to the brief form, so a visitor can convert from the exact example that convinced them.
the spec block with the render above it
the spec block with the render above it
the spec block with the render above it
the spec block with the render above it

Studio

The how-it-works page, and the one that closes technical buyers. Three principles lead, no minimum project size, designed for manufacture rather than for renders, and you own it. Five services follow, concept through documentation, then a five-step process from sending a rough sketch to files talked through with your shop.
The deliverables section lists every format with a plain explanation of what it is for, STEP because your shop will ask for it, native because it can keep changing, STL for the printer, PDF drawings with tolerances, and a numbered BOM. Turnaround is bracketed by project size rather than promised vaguely. Six FAQs close it, including the one nobody publishes: what happens if the design does not work. Three rounds are included, and if something specified turns out wrong, fixing it is on the studio.
the deliverables list, plus the turnaround brackets
the deliverables list, plus the turnaround brackets

Start

The quote flow, and the best piece of product thinking on the site. Six steps, what you are bringing, how big it is, what you need back, a description, optional timing and budget, and where to reply. A live turnaround estimate updates from the first three answers, so a visitor sees a realistic timeline before committing any personal details.
The standout is the sketchpad. Anyone without a photo can draw the part in the browser, or trace over a photo, and attach it to the brief. It removes the single biggest reason people abandon this kind of enquiry, which is not knowing how to express the thing they are holding. An NDA checkbox sits beside the email field rather than buried in terms, and both deadline and budget are explicitly optional with not sure yet as a real answer.
Three steps explaining what happens after sending sit below the form, and four FAQs catch the last hesitations.
two shots, the form with a live turnaround estimate showing, and the sketchpad open
two shots, the form with a live turnaround estimate showing, and the sketchpad open

Privacy

Short, plain, and consistent with a site whose entire commercial argument is publishing the terms up front. It sits in the footer beside the pages rather than shrunk into legal fine print.
the terms, short and in plain sight
the terms, short and in plain sight
Like this project

Posted Sep 19, 2026

Site and quote flow for a CAD studio. Drawing numbers, tolerance marks and a six-step brief with a built-in sketchpad for people who can't draw it