Showroom · Make-of

How Paperbird was made

An origami crane that folds itself as you scroll — nine SVG triangles, six honest fold stages, and a story about patience that is exactly two hundred words long.

What it demonstrates

That scrollytelling can be quiet. There is no parallax circus here — one sticky stage, one bird, one story. The folding illusion comes entirely from hand-placed keyframes: each stage of the crane's real fold sequence was authored as a set of triangle positions, and scrolling simply interpolates between them. The page is plain about this — the notes section says outright that it is not a paper physics simulation.

Techniques, honestly named

• Hand-keyframed polygon morphing — the bird is nine SVG triangles; every fold stage stores each triangle's three corners, fill, and opacity, and a smoothstep-eased lerp moves everything between stages.
• Real fold names — the six stages are the crane's actual sequence: square, valley fold, square base, bird base, reverse folds, crane.
• Opacity-dip crossfades — triangles that change roles between stages blink through zero opacity mid-transition instead of sweeping across the model; emerging shapes grow from their own centroid, never from nowhere.
• Damped scroll chase — fold progress follows the scroll position through a small easing factor inside requestAnimationFrame, and the loop stops itself whenever it settles.
• A counted story — the subtitle promises two hundred words, so the six story sections were counted programmatically: exactly 200.
• Respectful fallbacks — prefers-reduced-motion never tweens; each chapter shows its fold already completed, still. Without JavaScript the finished crane is baked into the markup and the story reads straight through.

Recreate it