Start flat.
Every room begins as a surface. Scroll slowly and the first hinge will remember what it can become.
A kinetic paper opera · browser-built
Paperbecomesmotion.
A flat sheet learns depth, rhythm, and one very elastic word.
Fold the stageGive color a side.
Cobalt holds the wall. Persimmon warms the wing. Mint catches the light. Yolk keeps the floor sunny.
Let type stand up.
Letters stop describing space and start occupying it. Width, weight, shadow, and depth become one voice.
Make it play.
The panels settle. Four letters rise. The whole stage clicks into a word you can feel before you read it.
A small paper principle
A fold is a decision.
It makes one side visible and another side possible. Good motion does the same: it reveals structure instead of decorating it.
Your turn · tactile desk
Touch the fold.
Close the stage, turn it in your hand, then shuffle the inks. Each control changes a physical property, not an effect layer.
Built from constraints
No pixels pretending to be paper.
The geometry, shadows, creases, and spatial type are authored in HTML and CSS. The material metaphor survives without remote media, WebGL, or a heavy motion library.
- 01Lock the material, palette, type axes, and fallback before building.
- 02Compose planes with transform origins, then teach them one motion vocabulary.
- 03Keep all meaning in the document flow so the performance can safely disappear.
- 04Review the result three times: repair, deepen, then reduce.