How this sample works
Kerfwork is a small working reference for the Cuttle-style product described in the requirements document. It shows the core idea end to end: a person changes a number, the geometry engine rebuilds every shape, and the result exports as a cut-ready file.
Use it to show stakeholders what we are building, to brief a geometry developer candidate, and as a starting point for the Phase 2 prototype. Everything runs in the browser with one open-source library.
Try these first
- Open the finger-joint box and drag Material thickness. Every finger on all five panels resizes so the box still slots together.
- Switch to the gear pair and change either tooth count. The centre distance and tooth alignment are recalculated so the gears still mesh. Press Spin to check.
- On the coaster, change the hole pattern and gap. This is built entirely from boolean operations: outline minus a grid of holes clipped to a rim.
- Raise the kerf to 0.4 mm with compensation on, then zoom in. The red cut path sits outside the dashed nominal outline, and inside it on holes.
- Switch the preview to 3D on the box and press Explode. Each panel is extruded to the material thickness and slotted into place, so you can see the fingers interlock before cutting anything.
- Open the project menu next to the logo and choose New project, then Blank canvas. Add a few shapes, drag them so they overlap, and set one to Hole. Overlapping solids weld into one part and the hole cuts through it, which is the same union and subtract pipeline the templates use.
- Press Export SVG. The file is in millimetres with red hairline cut paths, the format Glowforge, LightBurn and Cricut expect.
The pipeline
Every change runs the same five steps. Nothing is edited by hand: the design is a function of its parameters, which is what makes it parametric and non-destructive.
flowchart LR A[Parameters
sliders and toggles] --> B[Template build function
returns raw shapes] B --> C[Geometry kernel
union, subtract, intersect] C --> D[Modifiers
kerf offset] D --> E[Layout
pack parts onto sheet] E --> F[SVG preview] E --> G[SVG export]
What each part is and who owns it
| Module in this sample | What it does | Owner on the real team |
|---|---|---|
Geo kernel | Polygons in millimetres. Booleans and offsets through Clipper, scaled to integer micrometres for robustness. | Geometry developer |
Templates | One build(params) function per design. Box fingers, involute gear teeth, hole patterns. | Geometry developer |
evaluate() | Runs the pipeline: build, apply kerf, lay out, measure cut length. | Geometry developer |
toSVG() | Writes the export file with real-world units. | Geometry developer |
| Parameter panel | Generated from each template's parameter list, so new templates need no UI work. | Full-stack team |
| Canvas view | Pan, zoom, fit, spin animation, warnings. | Full-stack team with geometry developer |
| 3D view | Extrudes each part's nominal outline with Three.js and assembles it: box panels folded up, gears meshed on axles, coasters stacked. | Full-stack team with geometry developer |
Adding a new template
A template is a parameter list plus one function. This is the whole contract, and it is the same shape a future user-scripting feature would expose.
Templates.tag = {
name: 'Key tag',
params: [
{ key: 'w', label: 'Width', type: 'range', min: 30, max: 90, value: 50, unit: 'mm' },
{ key: 'hole', label: 'Ring hole', type: 'range', min: 3, max: 8, value: 5, unit: 'mm' },
],
build(p) {
const body = Geo.offset(Geo.rect(4, 4, p.w - 8, 22), 4, 'round');
const shape = Geo.subtract(body, Geo.circle(10, 15, p.hole / 2));
return { parts: [{ name: 'Tag', shape }], join: 'round' };
},
};Deliberately left out
These belong to later phases in the plan. Each is a known next step rather than a gap in the approach.
- More fonts and text layout. The blank canvas has three built-in fonts and single-line text. Uploading your own fonts, multi-line text and text on a curve come later.
- Freehand drawing and node editing. A vector editor layer, likely built on Paper.js.
- User scripting sandbox. Running user-written template code safely, for example in a sandboxed iframe or a QuickJS WebAssembly runtime.
- General 3D assembly. The 3D view knows how to assemble the three built-in templates. A production version would let each template declare where its parts sit in 3D, the same way it declares its parameters.
- Accounts, saved designs and a template library. The full-stack side: auth, database, storage.
- Curves. Shapes here are fine polygons. Production export should keep true arcs and Béziers for smoother cuts and smaller files.
Technical notes
- 3D:
threer128, MIT licence. Parts are extruded from the nominal outline, since kerf compensation exists so the finished part comes out at nominal size. Cut edges are drawn dark, the way a laser scorches them. - Any blank-canvas shape can repeat around a centre (a polar array) or in a grid (a rectangular array), like AutoCAD's ARRAY command. The copies go through the same union and subtract as everything else, so a ring of Hole circles around a disc gives a scalloped edge with no separate trim step.
- The pencil records the pointer path, removes points that don't change the shape (Ramer–Douglas–Peucker), then smooths it with Chaikin corner cutting. A stroke that ends near its start becomes a closed shape; otherwise it is an open line.
- Text uses
opentype.js1.3.4 (MIT) to read glyph outlines from three embedded Open Font License fonts: Instrument Sans Bold, Instrument Serif and Allerta Stencil. Curves are flattened to polygons and welded with a non-zero union, so letter counters come out as proper holes. - Export offers three formats built from the same polygons. SVG and DXF carry the kerf-compensated cut paths; DXF is written as R12 with CUT and ENGRAVE layers so older laser software reads it. STL extrudes each part's nominal outline to a chosen thickness and lays it flat for 3D printing. Inside claude.ai the save prompt only accepts some file types, so DXF and STL are wrapped in a zip there; a downloaded copy of the page saves them directly.
- The export follows the common laser convention of colour per operation: red hairlines cut through, blue hairlines engrave (score).
- Projects are saved automatically in this browser's local storage, so they stay on this device and aren't shared with anyone who opens the link. Syncing them to an account is the full-stack work listed above.
- Library:
clipper-lib6.4.2, the JavaScript port of Angus Johnson's Clipper, under the Boost Software License, which permits commercial use. - Box joints use an odd number of equal fingers per edge. Mating edges share a length and finger width, so their patterns always complement each other, and exactly one panel owns each corner.
- Gears use true involute flanks from the base circle, a 1.25-module dedendum, and centre distance
m(N1 + N2) / 2. The driven gear is rotated half a tooth when its tooth count is even so a gap faces the driver. - Kerf compensation offsets each part by half the kerf with mitred corners on boxes and rounded corners on curved parts.