WRLD

The Mark as a Real 3D Object

• · A scanned marker drawing is separated into two layers — a flood-filled silhouette and the ink lines — vectorised with potrace and extruded as separate solids in Three.js.
• · The ink slab is cut longer than the body so it stands proud of both faces; the drawing stays readable even when the mark is turned back-to-front.
• · Drag to rotate with inertia and a self-righting spring, pointer tilt, a hover pop that thickens the ink, and a click that punches the mark into a squash-and-stretch spin.
• · Falls back to the flat scan without WebGL, honours prefers-reduced-motion, and stops rendering on a backgrounded tab.

Handwriting as a Type System

• · Menu, page titles, lightbox controls and pagination numbers are all scans, not fonts — traced to SVG and used as CSS masks so the fill inherits currentColor and inverts to white inside the hover block.
• · Words are sized by measured cap height rather than bounding box, so FLASH and WORK share a baseline while the F's descender is free to hang below it.
• · Machine type (Archivo 900) is reserved for anything too small for a 2px marker stroke to survive — the collision between the two is the design.

A 1,229-Piece Archive

• · 990 flash designs and 239 tattoo photographs, served from Supabase Storage and listed from a single media table shared by both sections.
• · One page template drives FLASH and WORK; the section is a data attribute. Fifty tiles per page keeps the DOM light, while the lightbox indexes the whole set and swaps the grid underneath when it crosses a page boundary.
• · A CSS-column mosaic rather than a fixed grid — square scans and 3:4 photographs sit together with nothing cropped, and intrinsic dimensions on every image keep lazy loading from shifting the layout.

Studio-Run CMS

• · A private admin console for upload, replace, retitle, delete and reorder, with row-level security allowing public read and authenticated write.
• · Reordering by drag within a page, or by typing a new number into any card to swap two positions outright — the only way to move one piece from the back of a thousand to the front.
• · A build step converts HEIC and JPEG originals to WebP at two sizes, bakes EXIF rotation, and strips metadata so location data never reaches the web.

Brutalism Without Decoration

Paper white, black ink, hairline rules, no radii and no gradients. The page is close to empty so the one object in the middle has to carry it — and because it moves, it does.

Small Is Machine, Large Is Hand

A thin marker stroke reads as an unfinished scribble at menu size and as authorship at title size. The rule decides where each register belongs instead of mixing them arbitrarily.

Kept Flaws

The extruded body and ink share an outer wall, so rotation produces a hatched z-fighting shimmer along the edges. It was left in — it reads as tooth on the surface, and the studio preferred it to the clean fix.