Programme notes
How the paper theater works
PAPIER stages one fable, The Paper Fox and the Moon, in five layered cut-paper dioramas. This page is the making-of: the concept, the stage machinery at code level, the AI paper family, and the three iteration passes. Every prompt used to build it lives in the repository’s prompts/ folder.
1 · The concept
A stage play performed entirely in cut paper; scroll is the stage machinery. The suite this site belongs to already has shaders, cartography, kinetic type and film. PAPIER is deliberately the bright, playful, tactile one: torn edges, saturated Matisse colour, soft shadows, and a story with a quiet warm ending.
The fable is original and written for this site: a paper fox falls in love with the moon, tries to steal its reflection, climbs a mountain, flies a kite, and walks home to find the moon has been following him all along.
2 · The paper-depth signature
Each act is a real CSS 3D scene, not a parallax fake. The sticky stage has perspective: 1200px; every paper layer hangs at its own translateZ depth with a compensating scale so the composed picture looks correct at rest:
.layer {
transform: translateZ(calc(var(--zn) * -1px))
scale(calc((1200 + var(--zn)) / 1200));
}Scrolling drives a camera dolly on the act’s own view timeline, so you travel INTO the scene; near layers grow and slip past the frame while far layers barely move:
.stage { view-timeline-name: --stage; }
.stage__scene {
animation-name: dolly; /* translateZ(0 -> 550px) */
animation-timeline: --stage;
animation-range: contain 0% contain 55%;
}Act changes are stage-set changes: the next act carries a torn top edge and a negative top margin, so it slides up over the pinned previous diorama. Captions are real HTML text on little paper slips, choreographed on range slices of the same timeline. There is no JavaScript on this page at all, and no scroll hijacking: native scroll only. Browsers without scroll-driven animations, and anyone with reduced motion enabled, get flat, fully composed picture-book spreads with the complete story.
3 · The paper (Recraft family method)
All artwork was generated with Recraft (recraftv4_1) and hand-curated. The family coherence comes from one strict prompt formula: “cut paper collage illustration, [element], flat saturated colour shapes, matisse cut-out style, torn paper edges, no gradients, no outlines, plain white background”. Three seed images (fox, moon, waves) proved the formula held, then the rest of the cast was generated with the same formula, two takes per element, weakest takes rejected. Backgrounds were removed with Recraft’s remover and every asset was exported as transparent WebP under 150 KB. Stars, torn edges and the moon’s light are hand-authored SVG and CSS.
4 · The three iteration passes
The build went through three mandatory passes before anyone saw it: pass one hunts defects (spacing, contrast, timing, mobile overlap, console errors, reduced motion);pass two complexifies (more layers, secondary life such as the drifting clouds and the bobbing kite, richer transitions); pass three restores cohesion and removes what became noisy. The full log lives inITERATIONS.md in the repository.
5 · The prompts
The complete, reusable prompt set is captured in the repository root: prompts/design.md (the design brief including the fable premise), prompts/development.md (the 3D diorama architecture, scroll mechanics, fallbacks and gates) andprompts/image-creation.md (every Recraft prompt verbatim, with model, style and curation notes).