PLI is a fictional paper engineering studio in Lyon — pop-up books, self-folding packaging, window theatres. The audience is publishers and premium brands who commission paper mechanisms; the page's single job is to make you feel the moment a flat sheet stands up. So the site itself folds: nothing on it fades in — everything hinges, rises, or unfolds.
Five colours, all argued for by the bench: two paper stocks, the kraft of the backing board, the blue-grey a scalpel shadow makes on white stock, and one spool of bookbinder's thread. The red is spent almost nowhere — the thread, the letter I, punctuation — which is why it reads.
Display. Caslon is the bookmaker's face — right for a studio that makes books. Used at two extremes only: enormous (the letter-panels, the italic manifesto) and small (numerals, the cover stamp). The middle sizes are deliberately left to the sans.
Body and labels. A quiet, slightly warm grotesque that stays out of the serif's way. Letterspaced caps at 12px carry all wayfinding: eyebrows, tags, specs — the workshop's pencil annotations.
The scale is deliberate, not arithmetic: 12 / 15 / 17 / 22 / ~34 / ~57, then a jump to letter-panels sized in viewport units (clamp(88px, 24vw, 236px) per panel). The typographic bravery moment: the manifesto sets "lying down." on a literal CSS fold — rotateX(-24deg) with a gradient crease — that straightens when you hover it.
.leaf > .leaf > .leaf), each positioned at left:100% of its parent with transform-origin: 0 50%. Every panel except the first starts at rotateY(178deg), so the whole word arrives folded shut — you see only a kraft cover stamped "Atelier PLI". Because the panels are nested, each hinge compounds the ones before it: GSAP staggers rotationY → 0 and the word opens exactly like a pocket map. Each panel is double-faced (backface-visibility:hidden front + a pre-rotated kraft back) so mid-fold you see board, not mirrored letters, and a shade overlay tweens out in sync to fake self-shadowing. The parent supplies perspective:1400px.[data-stitch] anchors, drawn with stroke-dasharray:15 8 for the stitch texture, and revealed through a mask whose dash-offset tracks scroll progress — so the thread is sewn as you read. Punched-hole dots straddle each anchor.perspective:1000px stage. Each layer sits at a real translateZ depth with counter-scaling (1000 − z)/1000, gets scroll parallax via ScrollTrigger scrub, and the stage tilts toward the pointer with gsap.quickTo. A paper bird crosses the rooftops on scroll.rotationX from −68° on a bottom hinge), the process section is a second, smaller accordion that collapses to a stacked grid under 860px via display:contents + gsap.matchMedia, and grain is one tiled feTurbulence SVG. No raster images anywhere; no WebGL, so no context to lose.<span> accidentally left inside the packaging card's SVG, and added fill="none" to its dashed fold-line group.#AE8A5C measured ~3.0:1 on paper — below 4.5:1 for the 12px caps it was carrying. Minted --kraft-ink #856539 (5.1:1) and moved every small label to it: eyebrows, tags, specs, fact terms, captions, addresses.transition: transform hovers and GSAP's transform tweens on the same cards and button — they smear each other. Hover lifts now use the separate translate property, so GSAP owns transform outright.background-color + background-image to carry it.load.display:contents.progress(1) in the console and checked end states: panels return to the identity matrix, shades to 0, reveals to opacity 1. No console errors or warnings; zero raster images confirmed.