PLI is a fictional origami atelier in Paris's 11th arrondissement. The design promise: nothing on the page pretends to be paper — it behaves like paper, folding in real 3D, casting shadows where flaps double over.
Origami has an exact visual culture — uncut squares, valley/mountain notation, wet-folding, senbazuru — and the site borrows it literally. The hero square performs the three foundational folds on a loop, named in French like étude movements. Even the works cards hinge from their top crease when touched.
Paper, pencil, and kaki — the persimmon orange of classic origami paper, rationed to accents so the folds keep the stage.
Prata — display. A didone with knife-crisp thins: the typographic equivalent of a sharp crease.
Outfit Light — body and the wide-tracked caps used for atelier labels.
| Element | How it works |
|---|---|
| Folding sheet | A preserve-3d square under 1100 px perspective with three flaps: a right half hinged on its left edge (rotationY valley), a bottom half hinged backward (rotationX mountain), and a clip-path triangle rotating about the diagonal with rotate3d(1,1,0). Each flap carries a darker backface child, so the reverse of the paper is a different shade — like real duo paper. |
| Choreography | One GSAP timeline folds and unfolds each flap in sequence, renaming the étude between movements, while the whole sheet sways on a slow sine like paper held in air. |
| Square → crane | Two 12-vertex polygons with corresponding point order; scroll scrubs a smoothstep interpolation between them. No morph plugin — just arithmetic and the discipline of matching vertices. |
| Unfolding cards | Works cards hinge from transform-origin: center top on entrance (rotationX from −46°) and lift on hover, their box-shadow deepening as they leave the table. |
| Notation legend | Valley, mountain, and inside-reverse folds drawn with authentic dash patterns — dashed, dash-dot, and the persimmon chevron. |
| Accessibility | Reduced motion freezes the sheet flat with the first étude named; the crane morph still responds to scroll position. All information carried by animation is also carried by text. |
| You do | The page does |
|---|---|
| Watch the hero | The sheet performs vallée, montagne, diagonale on a loop |
| Scroll the crane section | Twelve vertices leave the square and become a bird, with a percentage of commitment |
| Hover a commission | The card hinges up from its crease |