A flat sheet of paper unfolds outward into four panels — then folds back inward. Each panel hinges from its edge in 3D space. Mechanical, tactile, satisfying.
Four paper panels hinge open and closed around a central square. At folded (scroll start), they're all stacked flat into a single thick sheet — the crane shape visible. As you scroll, they swing outward on their edges in 3D, revealing the unfolded plus-sign layout. It's the web equivalent of unwrapping a piece of paper folding — every paper-stationery / book / fold-out brand site does some variation of this.
A parent container with perspective and transform-style: preserve-3d. Inside, four panel divs all absolutely-positioned. Each panel gets a different transform-origin (one of its edges: top, bottom, left, right) and rotates 180° around that edge when folded. As --p goes from 1 (folded stack) to 0 (flat fold-out), each panel's rotation interpolates from 180° to 0°. The whole paper also tilts (rotateX/Y) for a "viewed from an angle" presentation.
Scroll inside. The crane folds open into a flat sheet of paper, then folds back together.
Build a scroll-driven origami fold animation. Sticky pin (top:0 height:100vh perspective:1200px) inside a tall 2400px section. Inside, a "paper" element (240×320, transform-style:preserve-3d) tilted slightly (rotateX(-10) rotateY(15)) for presentation. Inside the paper, FOUR absolutely-positioned panel divs (each inset:0, paper-cream gradient background, subtle inner shadow + crease lines). Each panel has a different transform-origin and rotation: panel-1 origin:bottom center, rotateX(calc((1 - var(--p)) * -180deg)); panel-2 origin:top center, rotateX(calc((1 - var(--p)) * 180deg)); panel-3 origin:right center, rotateY(calc((1 - var(--p)) * 180deg)); panel-4 origin:left center, rotateY(calc((1 - var(--p)) * -180deg)). When --p:1 all panels are folded together into a single thick stack (the crane visible on top via radial-gradient ellipse silhouette); when --p:0 they unfold flat outward into a + shape. JS scroll listener computes scroll progress and maps to a peak-at-middle curve mapped to 1 → 0 → 1 (so the crane folds open and back). Add a crane silhouette element on top that's only visible when folded (opacity:var(--p)). Hero label "Fold, unfold, fold" at top, state readout "FOLDED / UNFOLDING / OPEN" at the bottom. Paper-cream background (#f4ede1) for the whole stage gives the editorial paper aesthetic.