Get furniture and decor delivered free — and shop member deals
- Fast, free delivery on millions of items
- Access to Prime Big Deal Days deals on October 6–7
- Prime Video, Amazon Music and more included
Discover the Immersive Digital Workshop of Casa Azulejo
In this AI-crafted exhibition space, visitors are transported to a Lisbon workshop through a dynamic, animated azulejo wall that pulsates with life and history. The site’s signature move is its responsive, generative SVG-based wall that morphs and re-patterns seamlessly, creating an emotional rhythm reminiscent of a song shifting key—a visual symphony of ceramic craft brought to digital life.
Decoding the Palette, Typography, and Signature Technique
The site employs a carefully curated palette rooted in traditional azulejo hues: deep cobalt, warm ochre, glazed white, and vibrant red, each contributing to an authentic ceramic atmosphere. Its typography combines two handcrafted typefaces—Marcellus for inscriptions and Epilogue for body text—mirroring the tactile quality of ceramic surface inscriptions and workshop labels. The core signature technique is a responsive, SVG-based wall constructed entirely through a JavaScript pipeline that assembles intricate tile motifs. This method ensures the artwork remains both scalable and animated, with deterministic textures and wear effects that evoke centuries-old ceramic surfaces. These visual elements are dynamically rendered based on the viewport size, employing a grid system that adapts from phone to desktop, and include filters that simulate glaze cracks, chips, and fading—adding authenticity and depth. The entire system is built without external assets, leveraging inline SVGs, CSS transitions, and a procedural noise function to generate the aged, textured look—making each visit feel uniquely worn and lived-in.
The Creative Pipeline: Build, Critique, Certify
This project follows a three-step process: Initially, the AI system builds the generative SVG wall, meticulously assembling tile motifs and applying texture filters. Next, it undergoes a rigorous critique phase, where each pattern and animation is evaluated for authenticity, emotional resonance, and technical precision. Lastly, a virtual art director certifies the final iteration, ensuring the site’s storytelling remains compelling and true to craft traditions. This structured review process guarantees that the digital representation honors the tactile richness of Lisbon’s azulejo workshops while embracing innovative generative techniques, all guided by a dedicated design approach documented in the project’s comprehensive guide.
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 51 of 175, “azulejo”):
CASA AZULEJO — a Lisbon tile-painter’s workshop. Aesthetic: sun-bleached palazzo wall, painted ceramic. Palette: azulejo cobalt #1d4e89 on warm white glaze #f5f1e6, ochre wall, one carnation red accent. Fonts: marcellus (display), epilogue (body). SIGNATURE: a parametric AZULEJO GENERATOR — SVG tiles built from symmetry groups (p4m, pmm…), brush-stroke-textured cobalt motifs (birds, carracks, florals) composed into live wall panels; visitors pick motif family + symmetry + wear (“new / 1755 / seaside”) and the wall repaints; a gentle glaze-shine sweep passes on hover. Sections: the wall (generator), the workshop story, a saudade note, commission card. Unforgettable: watching a whole facade re-pattern itself like a song changing key.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/azulejo/
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.
As an affiliate, we earn on qualifying purchases.
Experience the Full Immersion
Visit the live AI-built exhibit of Casa Azulejo to explore the responsive, animated wall across devices—from phone-sized panels to expansive desktop facades. Dive into the craftsmanship behind each tile pattern, and browse through the entire collection of 175 digital sites in the exhibition hub, each echoing a unique craft story curated by AI artistry.
Visit the live room → · Browse all 175 rooms
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.
handcrafted ceramic tile backsplash
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
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.
