Site 12 / 25 · How it’s made

Paper engineering, in CSS

FOLD is a five-spread pop-up book about Pip, the smallest mountain ever measured. There isn’t a single image file in it — every hill, star and pennant is a styled element, cut and creased in code.

The pop-up hinge

The signature move is honest paper mechanics. Every piece of scenery sits with its base on the spread’s fold line, gets transform-origin: 50% 100%, and rests at rotateX(-91deg) — lying flat on the page. When an IntersectionObserver sees a spread cross a third of the viewport, it adds one class; CSS transitions stand everything up through an overshoot curve, cubic-bezier(.30,1.52,.42,1), so each cutout springs a few degrees past vertical and settles, the way card stock actually behaves. Staggering is a custom property: each piece carries --i, and transition-delay: calc(var(--i) * 115ms) raises the scene in reading order. Scroll back and the same observer folds it all flat again, ready to replay.

Cutting the paper

Torn edges are clip-path polygons with pseudo-random jitter (generated once by a tiny script, pasted in as literals). Scalloped edges are two stacked mask-image layers — a repeating radial gradient for the bumps over a linear fill — relying on the default mask-composite: add. Lift comes from two or three stacked hard box-shadows with small offsets and zero blur, which reads as layered card, not a glow. Center creases are hard-stop linear gradients that shade one half of a shape a step darker. The night spread is one big navy sheet clipped with a torn top edge so the daytime cream peeks out behind it; its stars are radial gradients with an inset shadow at the top rim, which is what sells them as punched holes rather than stickers.

Keeping it alive

Ambient motion is all CSS keyframes on inner wrappers, so it never fights the pop transition: the sun’s twelve-point clip-path star rotates on its stick, the cloud bobs on its visible kraft tab, flowers sway from their stem bases, and the “THE END” pennants pendulum on an SVG string. Hanging pieces get a damped swing keyframe on hover. The page-corner curl (a 315° gradient that stops at the diagonal) advances spreads on click.

Passes

Pass one built the five spreads and the hinge system. The verification pass ran screenshots at 1440×900 and 390×844, then fixed what the pictures showed: overlapping cards, mobile flower crowding, and contrast on the night card. prefers-reduced-motion flattens every animation and presents the book already open — legible, just quieter.