The concept
Brush & Gild is imagined as a century-old Deptford sign shop after closing time: half-finished fascia boards lean against one another, brushes wait in a timber rack, and one bright patch of gold catches the bench lamp. The layout behaves like that room rather than a polished agency portfolio. Boards overlap, docket slips sit at slight angles, enamel hangs below a fresh fascia and technical details become evidence of practice. Invented commissions, records and brush lore make the business feel occupied.
Painted lettering
The opening wordmark is an inline SVG in index.html. A broad curved path called .loaded-sweep forms #hero-paint-mask; the paintStroke keyframe reduces its dash offset, revealing the complete enamel-filled letters in one loaded pass. A broken .dry-brush highlight gives the ribbon a bristled edge, then two red pinstripes run off the terminals. IntersectionObserver adds .is-visible as workshop pieces enter, but content remains visible before that class so full-page captures and no-script reading never become blank.
The gilding bench
The gold is not a looping video. sizeCanvas() fits #gold-canvas to its framed board and drawGold() lays matte metallic type with deterministic flecks. Pointer movement calls burnishAt(), painting soft circles onto a transparent offscreen polish canvas. That canvas masks a specular gradient whose brightest band follows the hand. recordCoverage() counts genuinely touched cells, so the percentage now reflects work done. startGoldLoop() and stopGoldLoop() halt animation when the bench or document is hidden.
Workshop atmosphere
Everything visible is CSS, SVG or canvas. Layered radial gradients create the fall of a workshop lamp; inset borders mimic routed fascia mouldings; cast shadows, skewed paper and a breathing enamel drip keep the space physical. The new pull switch calls toggleRakingLight(); while lit, updateRakingLight() writes pointer coordinates into --lamp-x and --lamp-y, moving a clipped light pool across the boards and revealing the pounced “The hand remembers” wall inscription. Reduced motion fixes that pool in place. Handles are gradients, ferrules are metal bands and bristles are clipped shapes. Embedded SVG turbulence forms the grain, so there are no external image requests.
Palette & type
--green #2f4038 is the room; --cream #f0e5c7 is enamel and stock; --red #bd2e25 supplies sharp one-shot accents; --gold #d5a83a becomes leaf; --black #101310 anchors frames. Abril Fatface supplies showcard mass and soft display curves. Jost carries captions and copy with deliberate tracking. Both families are self-hosted from the shared font library.
Reproduce this
Prompt an AI agent to design a historic craft business as a working environment, not a conventional landing page. Specify one dominant room colour, a limited period-correct accent palette, locally hosted character type and rich fictional workshop evidence. Ask for a code-native signature interaction that changes under the visitor’s hand—such as cumulative canvas polishing—and require its physical process to shape the motion. Insist on three responsive compositions, semantic structure, keyboard states, reduced motion, zero external assets and screenshot-based critique before delivery.