Keycaps: from blockout to sculpted, in three.js

Self-initiated, for my own site.

The 3D object that runs through the site: a twelve-key pad on a 19.05 mm pitch, with a cylindrical dish and a row profile, lit like a studio product shot. It opens as a grey blockout and is sculpted as the hero’s last fix. Further down the page it comes apart one layer per offer, and a dial docks to it to show how long each offer takes.

The scene loads after the text has painted, only with WebGL and Save-Data off, inside a 220 KB budget. It renders only while something moves, and reduced motion gets still frames.