slop.boutique

A lab for computation and intelligence as material and medium. Run by Manuel and Ramon.

050 · 24 October 2026 · design · typography

CraftKit Workbench

One JavaScript grammar over real photo, vector, type, sheet, CAD and sound engines compiled to wasm, with 138 examples from halftones and riso prints to posters, plotter maps and drum loops.

Previewin your browser
The CraftKit program for a Swiss concert poster beside its result: NEUE MUSIK TAGE in heavy navy type on red with a cream circle

In early access for subscribers until 22 November 2026. Subscribe to run it now.

Subscribe →

One small JavaScript grammar over the engines of a family of creative apps: photo filters, vectors, type and layout, a spreadsheet engine, a constraint solver, sound and photo development. A program is a chain of values; the workbench records it as a graph, builds the controls and the layout from the ops' schemas, and runs it in the tab.

  • Real engines in the tab: image ops run PhotoCraft's crates compiled to wasm, with 63 Filter-menu commands and 47 Filter Gallery effects; VectorCraft traces and does path booleans; GridCraft's calc engine has 514 functions; CADCraft solves sketch constraints; SoundCraft supplies 27 plugins and synths; LightCraft develops photos with 41 presets.
  • px lambdas on the GPU: per-pixel functions are traced, compiled to WGSL and fused on WebGPU, or run as one JS loop; ck.iterate ping-pongs a simulation such as reaction–diffusion.
  • Type that sets properly: fifteen bundled open-licence fonts read by opentype.js, Knuth–Plass line breaking with typography stats, text on paths and text that wraps around a cut-out.
  • See the program: the Graph tab shows every node with where it ran and how long it took; IR, Explain, Checks and Events show the rest. Pick the target (WebGPU, wasm only, or native) and watch the tiers change.
  • Generated UI: sliders, curves, wheels and inspectors come from the op schemas; drop in your own image, and save results as PNG, SVG, PDF or audio.
  • Read up: a Reference generated from the op catalog, 106 building blocks traced to the app that has them, and a Study essay on how the apps were turned into one grammar.

138 examples come with it, in fifteen groups from one-liners to crossovers: oil paint brush by brush, colour halftone on newsprint, a two-drum riso print, a Game Boy Camera, a banknote engraving, marbled paper, a Swiss concert poster, a topographic map for a pen plotter, a step-sequenced drum loop and an album cover drawn from the beat. Video, image generation, OCR and depth are stand-ins and say so on screen; the agent panel needs the hosted model.

Sample photos are scikit-image's public-domain and CC0 test images (the astronaut portrait of Eileen Collins and the Hubble eXtreme Deep Field by NASA, a Falcon 9 launch by SpaceX, Greek coins from the Brooklyn Museum, a retina by Mikael Häggström, and others), loaded from the scikit-image repository. Fonts are SIL Open Font License families served by Fontsource. Outlines are read with opentype.js (MIT).

The full workbench on VT-12 Swiss concert poster: the CraftKit program on the left, the rendered NEUE MUSIK TAGE poster and its two generated sliders on the right
The full workbench on VT-12 Swiss concert poster: the CraftKit program on the left, the rendered NEUE MUSIK TAGE poster and its two generated sliders on the right
GX-06 Banknote engraving: the astronaut portrait redrawn as wavy navy engraving lines inside an oval frame on cream paper
GX-06 Banknote engraving: the astronaut portrait redrawn as wavy navy engraving lines inside an oval frame on cream paper
GX-11 Marbled paper: the program beside its node graph, with each node labelled by kind, timing and whether it ran on WebGPU, wasm or JS
GX-11 Marbled paper: the program beside its node graph, with each node labelled by kind, timing and whether it ran on WebGPU, wasm or JS
GX-11 Marbled paper: orange, cream and blue stripes dragged through noise fields into a marbled pattern
GX-11 Marbled paper: orange, cream and blue stripes dragged through noise fields into a marbled pattern
LD-05 Knuth–Plass against greedy line breaking: the code, two typeset A5 pages side by side and typography stats for lines, badness, stretch and widows
LD-05 Knuth–Plass against greedy line breaking: the code, two typeset A5 pages side by side and typography stats for lines, badness, stretch and widows
PP-07 Two-drum riso print: the astronaut portrait printed in pink and blue with grain and misregistration
PP-07 Two-drum riso print: the astronaut portrait printed in pink and blue with grain and misregistration
The Graph tab for XO-43 Album cover from the beat: 158 nodes, from audio bands and loudness through dozens of rect, fill and rotate shape nodes
The Graph tab for XO-43 Album cover from the beat: 158 nodes, from audio bands and loudness through dozens of rect, fill and rotate shape nodes
XO-43 Album cover from the beat: red bars from FFT bands rayed around an AFTER HOURS label with its loudness and length
XO-43 Album cover from the beat: red bars from FFT bands rayed around an AFTER HOURS label with its loudness and length
MS-10 Step-sequenced drum loop: the sequencer program beside the rendered waveforms, the drum controls and a loudness meter
MS-10 Step-sequenced drum loop: the sequencer program beside the rendered waveforms, the drum controls and a loudness meter
E-04 A layered poster with masks: the astronaut cut out on a grainy navy ground under the title NOCTURNE
E-04 A layered poster with masks: the astronaut cut out on a grainy navy ground under the title NOCTURNE
The Study tab: an illustrated essay on how the thirteen Crafting Apps were rebuilt as one grammar, with figures for lines of Rust, wasm builds and registered commands
The Study tab: an illustrated essay on how the thirteen Crafting Apps were rebuilt as one grammar, with figures for lines of Rust, wasm builds and registered commands
VT-14 Topographic map for a pen plotter: pink and blue contour lines over a white sheet
VT-14 Topographic map for a pen plotter: pink and blue contour lines over a white sheet
PP-06 Game Boy Camera: the cat sample dithered into four shades of Game Boy green
PP-06 Game Boy Camera: the cat sample dithered into four shades of Game Boy green

Attachments