Concept
A palazzo wall with a pulse
Casa Azulejo imagines a living Lisbon workshop rather than a polished design showroom. Its tension comes from two scales: the intimacy of one imperfect brush mark and the architectural force of twenty-four repeating tiles. Ochre establishes sun and plaster; glazed white creates breathing room; cobalt carries nearly all structure. Carnation red is reserved for the painter’s hand—small centres, labels and decisive actions.
The content is equally tactile. Invented kiln temperatures, family history, recipes and production times make the atelier feel occupied. Sections alternate like rooms: bright wall, deep-blue archive, paper-coloured workbench, then an ochre drying courtyard. This avoids a generic stack of cards and gives the long page a physical itinerary.
The interface is not beside the artwork. The interface is the wall.
Visual technique
Symmetry, brush and glaze
The signature wall is one inline SVG assembled in main.js. gridForViewport() chooses a tall three-by-five phone panel, a six-by-five tablet wall or an eight-by-five desktop façade; buildWall() then sets the viewBox and makeTile() adds each glazed ground, grout, glint and motif. Three drawing functions—motifFloral(), motifBirds() and motifCarrack()—construct the paths. rotationFor() changes their orientation for p4m, pmm and pg-inspired arrangements.
Two SVG filters provide material character. #brush uses feTurbulence and feDisplacementMap to disturb cobalt edges; #rough blends fine noise into filled strokes. The “1755” and “seaside” settings add deterministic cracks, chips, fading and glaze shifts using seededNoise(). Repainting blurs the old field, sweeps light across the façade and lets new .tile-unit groups arrive diagonal by diagonal. A CSS highlight traverses .glaze-sweep on hover.
The “Reveal charcoal cartoon” control is the workshop’s second state. Its click handler toggles .is-cartoon on .wall-stage, exposing the coordinate text and pouncing guides created inside makeTile(). CSS drains the fired cobalt into graphite, opens solid brush shapes back into outlines and slides an archival registration slip over the wall. The same SVG therefore becomes both plan and finished ceramic without swapping assets.
Entrance elements use IntersectionObserver to add .is-visible once, avoiding scroll handlers and layout thrashing. Reduced-motion preferences remove transitions and the glaze pass. There is no perpetual animation loop.
Palette & type
A disciplined ceramic system
Marcellus supplies inscription-like display faces at regular weight; its generous capitals and carved curves suit ceramic history. Epilogue handles body copy, navigation and workshop labels. Display tracking is tightened while tiny uppercase labels are opened dramatically, creating hierarchy without extra typefaces.
Reproduce this
Prompt for rules, not decoration
Ask an AI agent to build “a sun-bleached Portuguese artisan site whose central interface generates inline-SVG azulejo walls from several motif families, wallpaper symmetries and historic wear states.” Specify local Marcellus and Epilogue fonts, an ochre/cobalt/glaze/red palette, path-based artwork only, deterministic texture, staggered repaint transitions, responsive controls and reduced-motion behaviour. Request a workshop narrative with credible craft details, then require screenshot review at phone, tablet and desktop sizes. Most importantly, describe the emotional event: the entire façade should re-pattern as though a song changed key.