An AI Built a Jacquard & Card — The Cloth That Learned to Think Website — Here’s the Design Trick That Makes It Work

Discovering the Mechanism: The AI-Designed Jacquard & Card Experience

This site immerses visitors in a digital reimagining of the historic Jacquard loom, revealing how binary decisions shape a physical-looking textile. The standout feature is its interactive mechanism, where clicking on virtual punch cards directly alters the woven pattern, creating an enduring record of choices rather than a fleeting animation. This approach transforms the digital interface into a tactile, decision-driven timeline, emphasizing the loom’s role in turning information into matter.

Unpacking the Design: Palette, Typography, and Interaction

The visual language combines a carefully curated palette of earthy tones—ivory, indigo, madder red, and oak—to evoke the traditional textile environment. The site’s typography balances technical precision with approachable clarity, employing space-focused mono fonts for controls and informatory text, while a slab font anchors headlines and annotations, fostering a cataloged yet slightly unruly feel. Interaction hinges on a minimalist canvas layered with CSS gradients and SVG noise, simulating woven textures and the loom’s mechanical complexity. The signature move is the real-time, persistent editing of the textile pattern via a punch-card interface, made possible through a combination of JavaScript event handling, live rendering, and SVG animations. This ensures that each decision leaves a visible trace, reinforcing the idea of cloth as a timeline of thought.

The Creative Pipeline: From Build to Critique to Certification

The site’s development started with an iterative build phase, where the core weaving mechanics and punch-card editor were crafted to mimic the loom’s logic. Next, a rigorous critique refined the visual hierarchy and interaction clarity, ensuring the tactile experience remained intuitive across devices. Finally, a designer—guided by the project’s conceptual foundation—certified the authenticity of the experience, balancing historical fidelity with digital innovation. The entire process was orchestrated by an AI guide, which provided a structured framework for maintaining focus on the physicality of the cloth, the mutability of the pattern, and the transparency of the mechanism, ultimately producing a site that educates while engaging.

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 48 of 175, “jacquard”):
JACQUARD & CARD — the loom that taught computers to think. Aesthetic: workshop oak, thread, manila punch cards. Palette: warp ivory #efe8d8, weft indigo #27406b + madder red #a33b2e, oak, manila #d9c294. Fonts: zilla-slab (display), space-mono (card data). SIGNATURE: a LIVE WEAVING SIMULATION — canvas renders cloth thread-by-thread, shuttle passing, pattern accumulating row by row; beside it a PUNCH-CARD EDITOR (click holes in a manila card grid) that drives the weave in true jacquard logic — edit a hole, watch the cloth change on the next rows; preset drafts (herringbone, damask rose, houndstooth). Essay: from Jacquard’s cards to Lovelace’s engine, set with woven CSS textures. Unforgettable: punching holes and watching cloth compute.

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

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.

Explore the Mechanical Tapestry

Visit the live exhibit to experience the digital Jacquard loom firsthand. Dive into the interactive punch-card editor, observe how decisions leave lasting marks, and appreciate the craftsmanship behind this AI-crafted homage. Don’t forget to browse all 175 sites in the collection at the hub for more innovative design stories rooted in history’s mechanical marvels.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

• Room 40: La Fée Verte — The Green Hour, Paris
• Room 37: Alpenpost Studio – Procedural Alpine Travel Posters
• Room 45: Arcana Minor — One Deck. One Fate.

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.

Powered by Thorsten Meyer AI