Mug Shelf

I drink from the same two mugs and keep buying more, which is a hobby with a storage problem rather than a taste problem. The index came first, as a way to see the whole collection at once and stop buying the mug I already own in a different glaze. It is built after naturalselection.so and curated.supply, which both understood that a catalogue of objects should look like the objects and not like a store.

Thirty-six mugs, fourteen makers, from Heath and Hasami to smaller studios like Erin Louis and Olivia Ko.

Cutting out thirty-six mugs

Product photography is white backgrounds and drop shadows. Put forty of those in a grid and you have made a store page. Every mug on the site is a background-removed cutout instead, so what you see is the object with nothing behind it.

Doing that by hand thirty-six times was not going to happen, so I wrote a small tool around the macOS Vision framework. It is about a hundred lines of Objective-C and it does the subject isolation locally, with no service and no upload.

./tools/cutout images/heath/coupe.jpg cutouts/heath/coupe.png

The flags it grew are a record of what kept going wrong. There is an alpha-only mode for sources that arrived transparent and needed cropping rather than masking. There is a crop mode for isolating one mug out of a photograph of six. And there is a full mode that skips the auto-crop entirely, which exists solely for the shelf image: crop it to its contents and every compartment coordinate in the drag-and-drop code silently points at the wrong place.

The shelf

The second page is a Sætter 15, and you drag mugs into its compartments and export the arrangement as a PNG. The arrangement persists in local storage, so the shelf is still yours when you come back.

This is the part people actually use, and it is the part I nearly did not build. An index answers what do I own. A shelf answers what would this look like, which is the question that was making me buy things.

Four of the names are guesses

Some mugs came out of photographs where nobody wrote down the maker. I matched those on form and glaze, and four of the attributions are my best reading rather than something I can point to a source for. They are marked as such in the data. A collection that quietly presents a guess as a fact is worth less than one that admits to four soft entries out of thirty-six.

On handwriting

The site is set in a font built from my own handwriting. It is the right register for the subject: this is a list of cups, not a catalogue raisonné, and setting it in something neutral and correct would have made it read as more serious than it is. The type is doing the job a disclaimer would otherwise have to do.