Step into Room 63 of this curated digital exhibition, where an AI-crafted site simulates an 18th-century mechanical writing automaton. Its signature move? A mesmerizing, procedurally generated ink stroke that travels through linked mechanical components, revealing the inner workings of a fictional historical device with theatrical flair and meticulous detail.
Get art and craft supplies delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
The site employs a restrained palette of dark, textured backgrounds accented by brass and porcelain highlights, evoking a sense of antique craftsmanship. Its core visual language hinges on layered SVG elements, crafted from gradient-filled geometries resembling traditional materials like walnut, brass, and porcelain. The signature interaction involves a procedural SVG stroke system, where phrases—be they visitor names or historical notes—are dynamically converted into animated ink strokes. These strokes are animated through a custom script that interprets each letter as a sequence of mini-movements, mimicking the mechanical motion of a quill. An inverse-kinematics arm solution guides the animated pen, giving each stroke a believable, organic motion that travels through linked mechanical components, such as brass joints and porcelain limbs. The site’s typography combines high-contrast engraved styles with subtler, serifed labels, all embedded within a responsive layout that adapts seamlessly across devices. The entire visual and interactive system is built to simulate a cabinet of curiosities, where each element feels cataloged, handled, and alive—yet entirely generated by AI without copying any real-world machine. The design’s signature technique is its procedural SVG stroke system combined with live inverse-kinematics, which together create a believable, linked motion path that visibly travels through the automaton’s parts, making the mechanical process a spectacle in itself.
The project was developed in a three-step pipeline: first, the site was built through code, translating the automaton’s imagined mechanism into layered SVGs and scripts; next, a rigorous critique was conducted to refine visual fidelity, motion realism, and responsiveness, guided by a dedicated design guide that emphasized theatricality and authenticity; finally, an art director’s certification ensured that each element—material textures, motion cadence, and interaction—converged into a cohesive, museum-grade experience rooted in the site’s concept of a mechanical demonstration cabinet.
The full build notes live in the room’s design guide.
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 63 of 175, “scribe”):
THE WRITING AUTOMATON — a 1774 clockwork child who writes. Aesthetic: Jaquet-Droz cabinet workshop; velvet + brass + porcelain. Palette: walnut #3b2a1d, brass, porcelain cream, ink black, one wax red seal. Fonts: cormorant-garamond (display), eb-garamond (body). SIGNATURE: the automaton WRITES BEFORE YOU — a mechanical hand (layered SVG arm with visible linkages) dips its quill and writes a sentence in flowing script (stroke-dashoffset calligraphy with pressure-varying width), while below the deck a CAM STACK rotates and its followers visibly drive each joint (the mechanics are the show); choose from three cams (“I think, therefore I am”, the shop’s motto, your name via input → generated script path). Cabinet section: 6,000 parts count, winding ritual, the eyes that follow the pen. Unforgettable: watching cams become handwriting.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/scribe/
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 automaton firsthand by visiting the live site, where the mechanical ballet unfolds in real time. Explore the full suite of 175 curated exhibits at the exhibition hub, each crafted with the same AI-driven ingenuity and attention to material authenticity.
Visit the live room → · Browse all 175 rooms
Previously in Wing III
- Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
- Room 58: The Atlantic Cable Company — Race the Signal
- Room 59: The Meridian Carousel — After Dusk, Since 1908
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.
As an affiliate, we earn on qualifying purchases.
antique style writing automaton kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
SVG animation tools for mechanical design
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
inverse kinematics robotic arm model
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
