Catalogue / Plate 23← All plates

A title with a cat on it

A pixel title with a stepped extrusion and a small ginger cat that lives on it.

23 / Type · canvas

Sampleton Cat Café · open late

Cat nap

One ginger cat, nine lives, and the best seat in the house is the one on the sign.

Click anywhere on the title and the cat goes there. Leave it alone and it naps.

The cat is sitting. Jumps so far: 0, of which 0 crossed a gap between letters. Naps so far: 0.

Remake it

Build one interactive web page: The words CAT NAP drawn on a canvas in a pixel face of our own, each letter cut from a thick slab with a stepped shelf. A ginger cat, drawn from strings of pixels, lives on top. It walks along the skyline of the letters, hops the steps, jumps the gaps between them, goes where you click, and falls asleep if left alone, with the Zs drifting up. The readout counts its jumps and naps.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A café, a game, a children's or pet brand, a launch with a mascot: anywhere the first screen may be played with. Do not let it fail the way this kind of piece usually does: A title that exists only as pixels, so a screen reader finds no heading. Here a real heading carries the words, the canvas is hidden from assistive technology, every action is also a button, and reduced motion leaves the cat asleep.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.

Notes: when it suits, when it does not, how it fails

When it suits: A café, a game, a children's or pet brand, a launch with a mascot: anywhere the first screen may be played with.
When it does not: A sober page, or a title the visitor must read in a hurry.
How it fails: A title that exists only as pixels, so a screen reader finds no heading. Here a real heading carries the words, the canvas is hidden from assistive technology, every action is also a button, and reduced motion leaves the cat asleep.

Measured on: labs.google · T5. Built from scratch for an invented business; nothing here comes from the site studied.