Catalogue / Plate 20← All plates

A title the pointer shears apart

An arcade's title built from slivers that your pointer scatters and that heal in two seconds.

20 / Type · canvas

Sampleton Arcade · open late

Sampleton

Forty cabinets, one token, and no clock on the wall.

Move across the title. Click or tap to punch a hole.

Slivers gone right now: 0%. Most gone in one go: 0%. They heal with a time constant of 1.2 s.

Remake it

Build one interactive web page: The word SAMPLETON drawn on a canvas in a five by seven face of our own, every row of every letter cut into three slivers. Move across it and the slivers the pointer passes are kicked sideways and dissolve; click or tap and a bigger hole is punched. Each sliver then comes home on its own spring and fades back in, with a time constant of 1.2 seconds, so the whole title is whole again in about two. The readout counts the slivers gone.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A game, an arcade, a launch page or a tool whose title can be a toy. Anywhere the first screen is allowed to be played with before it is read. 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, and a visitor who breaks it and cannot read it. Here a real heading carries the words for assistive technology, the title is whole again within about two seconds, the touch drag still scrolls the page, and reduced motion keeps it whole.

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 game, an arcade, a launch page or a tool whose title can be a toy. Anywhere the first screen is allowed to be played with before it is read.
When it does not
A heading the visitor must read at once, a page for people in a hurry, or any brand that wants calm.
How it fails
A title that exists only as pixels, so a screen reader finds no heading, and a visitor who breaks it and cannot read it. Here a real heading carries the words for assistive technology, the title is whole again within about two seconds, the touch drag still scrolls the page, and reduced motion keeps it whole.

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