Build guide · six decisions
From sheet to stage.
This is the reproducible path behind FOLDSPACE: concept first, code-native geometry, resilient fallbacks, then three deliberate review passes.
Choose a material rule.
Start with one physical behavior, not a list of visual effects. Here the rule was simple: every motion must feel like creasing, hinging, lifting, or settling paper.
Explore before locking.
Three incompatible concepts were written before code: a fold choir, a print conveyor, and a paper weather system. The fold choir won because its fallback could remain the same artwork, only still.
Lock the visual contract.
The full decision record lives in DESIGN.md: six tokens, two variable typefaces, one signature, exact contrast pairings, banned patterns, payload targets, and the reduced-motion interpretation.
Build the object.
- Make each face a real element with a clear transform origin.
- Use
perspectiveandpreserve-3don the smallest useful scene. - Link the main choreography to scroll with CSS timelines.
- Use JavaScript only to toggle discrete states for the tactile desk.
Design the exit routes.
Reduced motion opens the stage and stands the letters upright. No JavaScript leaves the complete scroll story and a static desk. No media or WebGL changes nothing because the signature never depends on either.
Repair, deepen, reduce.
The first pass fixes defects and mobile composition. The second tests one depth hypothesis. The third removes anything that competes with the origami stage, then runs accessibility, performance, CSP, and route checks.