The concept
Teatro dei Fili is imagined as the living archive of a five-generation Arezzo company whose craft accumulated instead of modernising away. The page descends from public stage to family ledger, control anatomy, carving bench, repertory wall, and finally the workshop door. Its visual spine is backstage rigging: vertical linen lines, registration labels, scarred timber, imperfect paper, and a hard amber worklight. Nothing is perfectly square because the company’s authority lives in touch, repair, and repeated use.
The living rig
The hero canvas lives in main.js. Every figure is a network of Point objects that remember present and previous positions. Point.update() turns that difference into damped velocity and adds gravity; eight passes of solveLink() keep shoulders, elbows, hips, knees, and feet at believable distances. constrainString() then ties the head, hands, and knees to five rotating attachment points calculated by anchor(). Dragging moves only the wooden control, so weight, lag, knee lift, and settling arrive through the solver rather than keyframed body poses.
Celeste crosses the stage on an automated bar route while opposing knee-string lengths create each step. Ottavio’s bow is mapped to the hero’s scroll progress, so it happens during the first descent while he remains visible. Pointer controls are joined by number and arrow keys. The loop stops on document.hidden; reduced-motion mode renders only requested settling frames instead of running continuously.
Paint, wood, paper
Every visible artifact is code. Canvas figures have role-specific silhouettes, painted cheeks, costume panels, joint rings, wood-grain face marks, string lines, and controls with a highlighted grain edge. CSS cabinet portraits use different hair shapes, jewel grounds, crooked mounts, and darkroom falloff. The bench combines faceted poplar heads, gouge cuts, shavings, a steel chisel, burned grain, and inventory copy. Its worklight-pull button cycles data-inspection in main.js; CSS then travels an amber inspection pool across the stations, dims the surrounding bench, raises each face, and finally reveals the painted tear Livia hid beneath an eyelid. The ritual is touch- and keyboard-operable. Posters behave as handled letterpress sheets: each carries a production colour, registration line, print border, show duration, rotation, and focus-visible lift. A velvet curtain pair opens once before the worklight blooms.
Palette & type
Italiana supplies the high-contrast, fragile display voice; Spectral gives body copy the warmth of a printed programme. The core tokens live at the top of styles.css: stage-dust umber #2a2118, worklight amber #e6a94b, string white #f1e5cf, plus carmine, teal, and indigo costume beats.
Reproduce this
Prompt an AI coding agent to build a self-contained theatrical archive in semantic HTML, CSS, and canvas JavaScript. Specify an old-world craft, a dominant material colour field, contrasting worklight, self-hosted character fonts, and one interaction that embodies the craft rather than decorating it. Ask for Verlet points with distance constraints, a draggable kinematic control, section-linked physical behaviour, a single orchestrated entrance, responsive recomposition, reduced-motion support, and a screenshot-based critique at phone, tablet, and desktop widths.