How Teatro dei Fili — Five Generations on a String Renders SIGNATURE TECHNIQUE With Zero Image Assets

AIThis post was created with the assistance of artificial intelligence (AI).

Teatro dei Fili — Five Generations on a String — Physics-Driven Rigging — Room 73 of 175: “Teatro dei Fili — Five Generations on a String” — visit the live site.

Reimagining a Living Archive of Traditional Craft

Teatro dei Fili is an AI-crafted digital homage to a centuries-old marionette theatre. Its standout feature is a dynamic control system that visually communicates the delicate physics of puppetry, all realized through code rather than static images. This signature technique transforms the web experience into an interactive, tactile reflection of traditional craftsmanship.

The development begins with a meticulous build phase, translating physical puppetry mechanics into code that accurately simulates joint constraints, gravity, and damping. Next, a rigorous critique process evaluates the realism of motion, the fidelity of materials, and the responsiveness of interactions—ensuring the digital puppets behave convincingly. The final step involves an art director’s certification, aligning the technical execution with the site’s conceptual commitment to craftsmanship, guided by the detailed notes of the project’s creative guide.

The full build notes live in the room’s design guide.

Dissecting the Palette, Interaction, and Structure

The site’s visual identity hinges on a warm, earthy palette inspired by antique materials, featuring hues like umber, amber, and string white. These colours evoke the tactile quality of wood, paper, and linen, establishing an authentic atmosphere. The typography employs custom, vintage-inspired fonts that reinforce the old-world craft ethos.

Core interactions are built around a canvas element that simulates a marionette’s rigging system. Each puppet is a network of points connected by virtual constraints, with physics calculations that emulate weight, delay, and movement. Users control the puppets via a draggable interface that manipulates a single master control, causing natural, physics-driven responses in the limbs—mirroring real marionette mechanics.

This setup is achieved entirely through semantic HTML, CSS, and JavaScript, with no reliance on image assets. The code itself forms the visual language, with canvas-rendered puppets and CSS styling creating a rich, textured aesthetic. The entire system emphasizes touch, repair, and repeated use, reflecting the authenticity of traditional marionette craftsmanship.

Live view of Teatro dei Fili — Five Generations on a String — The room as it renders live — open it in your browser.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 73 of 175, “marionette”):
TEATRO DEI FILI — a marionette company, five generations. Aesthetic: backstage rigging; painted faces in worklight. Palette: stage-dust umber #2a2118, worklight amber, puppet costume jewel tones, string white. Fonts: italiana (display), spectral (body). SIGNATURE: PUPPETS ON REAL STRINGS — marionettes hung from visible control bars, their limbs driven by VERLET STRING PHYSICS: drag the bar and the puppet follows with authentic lag, knee-lift, and settle; one puppet walks across the stage on an automated bar choreography (walk cycle emerging purely from string tension), another bows when its section arrives. The five-generation family tree, the carving bench (wood-grain heads in progress), repertoire posters. Unforgettable: realizing the walk is physics, not animation.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/marionette/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the Art of Digital Marionettes

Visit the AI-built exhibition to explore this living archive firsthand. Dive into the craftsmanship that bridges traditional technique and modern technology, and browse all 175 innovative sites in the collection at the project hub.

Visit the live room → · Browse all 175 rooms

Previously in Wing III

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Amazon