Inside Room 27 of 175: The Making of "CALIBRE 27 — Haute Horlogerie Manufacture"

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

CALIBRE 27 — Haute Horlogerie Manufacture — Layered SVG Animation — Room 27 of 175: “CALIBRE 27 — Haute Horlogerie Manufacture” — visit the live site.

Discover the craftsmanship behind the virtual haute horlogerie

Within an AI-crafted digital atelier, Room 27 showcases an intricate, animated movement study of the fictitious CALIBRE 27 watch. Its signature feature is a fully interactive, scroll-driven SVG that dissects the watch’s components layer by layer, revealing the inner workings as if inspecting a real mechanism under a bench lamp. This digital stage eschews traditional imagery, instead presenting a meticulously crafted, code-generated model that breathes with precise motion and detailed geometry, inviting viewers to experience the anatomy of haute horlogerie in a purely digital form.

Palette, Typography, and Interactive Layers

The visual language employs a sophisticated palette centered around deep anthracite, polished silver, and warm rose gold accents, evoking the luxe feel of a high-end watchmaker’s workshop. The background layers incorporate velvet textures, bench-light gradients, and metallic washes, creating a tactile depth that complements the technical precision of the content. Typography is carefully curated: Cormorant Garamond for commanding headlines, Archivo for clear body text, and Chivo Mono for technical labels, ensuring readability and elegance. Interactivity is anchored in layered SVG groups, each representing a watch component, with data attributes controlling their position, rotation, and relationship. Gear teeth are dynamically generated with JavaScript, accurately mimicking real-world gear ratios and tooth profiles, while hover and focus tooltips provide in-depth inspection points across every part—making the invisible machinery accessible and explorable.

Live view of CALIBRE 27 — Haute Horlogerie Manufacture — The room as it renders live — open it in your browser.

From Concept to Certification

The creation of this exhibit follows a rigorous three-phase pipeline: initial development focused on translating a detailed watch movement into scalable SVG markup, followed by an intensive critique to refine motion accuracy and visual harmony, culminating in an art director’s approval ensuring the experience balances technical fidelity with aesthetic appeal. The entire process is guided by an AI-led review, ensuring adherence to the design vision and technical precision, complemented by an in-depth guide that details the construction and interactive elements step-by-step.

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 27 of 175, “calibre”):
CALIBRE 27 — an haute-horlogerie manufacture. Aesthetic: anthracite velvet tray, watchmaker’s bench light. Palette: anthracite #17181c, polished silver, rose gold #c9906b, dial cream. Fonts: cormorant-garamond (display), archivo (UI), chivo-mono (specs). SIGNATURE: an exploded mechanical movement built in layered SVG — scroll assembles/disassembles ~12 labeled layers (barrel, gear train, escapement, balance); gears rotate at CORRECT ratios, the balance wheel oscillates and the escapement visibly ticks; hover any part → name + function. Tourbillon section that rotates the whole cage. Spec sheet: 21 600 vph, 72 h reserve, 31 jewels (tabular numerals). Unforgettable: a watch that truly runs in markup.

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/calibre/

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 craftsmanship firsthand

Visit the live digital atelier to explore the full interactive movement, and browse the complete collection of 175 AI-designed exhibition sites at the hub. Immerse yourself in a curated world where art, craft, and technology converge in digital harmony.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

Room 26: KP-9 Station — Arctic Geomagnetic Observatory

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.