Scroll-driven CSS 3D

This MacBook is built with CSS.
Not a single image.

Every millimetre is CSS — no images, no 3D engine

A laptop with no pixels of its own.

The lid, the hinge, the notch, the seventy-eight keycaps, the trackpad and the aluminium sheen are all CSS gradients and shadows, laid out on the real 312.6 by 221.2 millimetre footprint. Scroll position drives one custom property; the lid rotates on it, the body scales on it, the title leaves on it. One file, no framework, no 3D library, no image assets.

78keycaps drawn with gradients and inner shadows
1custom property driving the entire animation
0images, sprites or 3D engines used
60fpstransform-only motion, smoothed with lerp
ABO ASKAR