← all notes

Pixel art only scales by whole numbers

One integer at the top of the stylesheet, and every measurement in the garden derives from it.

Depth
soil — Worked. Turned over a few times and holding its shape.
Planted
Tended

A 32px sprite drawn at 1.5× lands its sample points between source pixels. The browser interpolates, the hard edges soften, and carefully drawn art turns to mush. At 2× every source pixel maps to exactly four screen pixels and the art survives intact.

That single constraint decided more of this site’s architecture than any other.

--px-scale is one integer. Every size in the scene is derived from it — the ground band, the tree heights, the cave, the cloud sizes, the seam. Nothing is authored in screen pixels. On small viewports it drops to 1, not 1.5, and because everything derives from it the whole composition rescales coherently rather than needing a second set of numbers.

The rule propagates further than layout. Sprite sheets have to be cut on the grid. Background sizes have to be whole multiples. Anywhere a percentage meets a sprite, something eventually lands on a half-pixel and shows.

The tell that you’ve broken it: art that looks fine at one viewport width and faintly blurry at another.