Guide · site 183 · wave 8, Form
MIURA gives the Miura-ori — the crease pattern that deploys satellite
solar arrays and folds a map you can open one-handed — a live body in pure CSS 3D. No
WebGL, no canvas, no images: every parallelogram is a div, and every one of
them is enslaved to a single fold angle θ.
A fictional exhibit page for the fold itself — audience: anyone who has fought a road map, plus the engineers who put this crease into orbit. The page has a single job: show that a Miura sheet has exactly one way to move. A full sheet gathers into a dense packet and relaxes flat again in one continuous breath, while a telemetry readout reports fold angle, footprint and ridge height, and a hint invites you to press and hold to hurry it.
A dimmed moon-ink at 68% alpha handles labels and captions; hairlines sit at 14% so the telemetry rows whisper instead of gridding the page.
Display — Shippori Mincho 500–700
MIURA — 三浦折り
A Japanese Mincho for a Japanese fold: high-contrast strokes with the crispness of a printed chart. The wordmark's letter-spacing is live — it tightens from .155em to .04em as the sheet gathers, so even the type folds.
Labels & body — Zen Kaku Gothic New 400–700
Fold θ 63.3° · footprint 47% · one degree of freedom
A quiet Japanese gothic for telemetry and prose — tabular numerals in the readout, wide-tracked uppercase for instrument labels, sentence case for the notes.
The signature element is honest rigid-origami kinematics, not an approximation. The Schenk–Guest closed form gives the whole sheet from one angle θ and the parallelogram skew γ = 63°:
Each facet is one absolutely-positioned div given a hand-built
matrix3d: the first two columns are the facet's in-plane basis vectors
(u along the fold direction picking up ±H in z, v along the zigzag picking up ±V
in x), the translation column places its corner vertex, and column parities flip the signs —
so all 117 facets are four orientation classes stamped across the grid. Shading never
guesses: the four class normals are rotated into view space and lit by a warm key over a
cool indigo fill, and the resulting colours drive four CSS custom properties per frame.
Crease borders tint by fold direction — vermilion mountains, indigo valleys — and deepen
with sin0.8θ as the packet gathers.
Because the geometry is closed-form, rigidity is testable: a verification hook re-derives every facet's four vertices at any θ and asserts all edge lengths still equal a and b. Across the full fold cycle the worst edge error is ~10−13px — nothing bends, nothing tears, no facet ever fights another for the same plane.
Everything else is discipline: a breathing cycle eased through an asymmetric cosine (gathering takes 55% of the period, opening 45% — paper resists being packed), a ground shadow that spreads and fades as the footprint grows, and a hold-to-pull interaction that runs time at 3.2× while the pointer is down.