Step into a recreated traditional sign shop, where vintage craftsmanship meets digital craftsmanship. The centerpiece is a tactile gold burnishing interaction that responds to visitors’ hand movements, embodying a century-old sign painter’s manual technique brought to life through AI-driven web effects.
The 3-Stage Creative Pipeline
The project follows a strict three-pass workflow inspired by the guide: initial construction of the environment’s core layers—palette, typography, and interaction—based on a detailed concept of a vintage sign shop; a rigorous critique phase where every visual and interactive element is examined for authenticity, responsiveness, and subtlety; and finally, an art director’s certification to ensure the craft’s integrity before deployment. This process emphasizes transparency, craftsmanship, and a deep respect for traditional signmaking techniques, all encoded through the AI’s design logic.
The full build notes live in the room’s design guide.
Decoding the Palette, Typography, and Signature Interaction
The environment centers around a dominant deep green hue, reflecting authentic workshop atmospheres. Accents are carefully chosen from period-appropriate reds, creams, and golds, all self-hosted within the site to preserve authenticity and eliminate external dependencies. Typography employs classic display fonts with deliberate tracking, mimicking hand-painted signage styles.
The signature interaction is a responsive gold burnish that simulates manual polishing. As visitors move their cursor or touch the screen, the system calculates the hand’s position to softly mask and reveal metallic flecks on a canvas, creating a tactile sheen that feels both visual and physical. This process involves layered canvas masking, deterministic fleck rendering, and real-time pointer tracking, all built without external assets, relying solely on CSS, SVG, and JavaScript.
The entire effect is a seamless orchestration of layered gradients, SVG turbulence for grain, and precise brush stroke simulations, culminating in an immersive experience that demonstrates the art of signwriting in a digital space.
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 85 of 175, “signwriter”):
BRUSH & GILD — traditional signwriters, est. 1924. Aesthetic: workshop full of half-finished fascia boards; mahl sticks and one-shot enamel. Palette: workshop green #2f4038, enamel cream, one-shot red + black, 23k gold leaf. Fonts: abril-fatface (showcard display), jost (body). SIGNATURE: LETTERS PAINTED BEFORE YOU — headlines render as BRUSH LETTERING that paints itself: variable-width strokes with visible brush ribbon, wet enamel sheen, the occasional pinstripe flourish off a terminal; the GILDING bench: size laid, gold leaf tamped (it flutters on), then BURNISHED under your cursor to mirror shine (specular sweep follows pointer). Showcard gallery (pub fascia, barber, fairground styles — all painted live), the brush lineup with what each is for, ticket-writing speed lore. Unforgettable: burnishing the gold yourself.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/signwriter/
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 recreated workshop firsthand
Visit the live AI-built environment to witness the signature gold burnish in action. Explore the full collection of crafted environments at the hub, where each site celebrates the art of manual craft through digital innovation.
Visit the live room → · Browse all 175 rooms
Previously in Wing IV
- Room 77: The Foley Stage — Perform the Picture
- Room 76: The Immortal Game — London, 1851
- Room 80: Paper Flight Lab — Fold, Trim & Fly
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.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
