Lab

Stamp Collection

Hover a stamp to lift it, click one to bring it forward.

Three postage stamps laid out by hand on a dark table. Hovering one lifts it, clicking one brings it to the front of the stage and pushes the other two out behind it, and the print inside a focused stamp slides under its own window as the pointer moves around it.

Key insight: the paper is an SVG, not a div with a CSS mask. Both can punch the perforations, but only the SVG gives a drop-shadow that follows the scallops instead of the bounding box, and a stamp whose shadow is a rectangle is a rectangle. The holes sit centred on the edge line so half of each one bites in, which is what leaves convex paper between them.

A stamp is staged by animating its width and height, never by scaling it. A scale takes the perforated edge and the shadow blur with it, which is the one thing drawing the paper as vector was for. So the poses are stage pixels and the lettering is sized in cqw against the stamp itself, which makes it a query container for its own children and never for itself.

The print is drawn larger than its window on every side, so the parallax has somewhere to slide and no edge of it can cross the cream frame however far the pointer pushes. It runs on a looser spring than the stamp: the stamp arrives and stops, the print keeps drifting for a moment, which is what reads as glass.


More experiments