How the masklearned tolook back.

01 · Concept

A candlelit threshold

Bottega Maschera is imagined as a working Venetian mask studio caught between two performances: Carnival inside and acqua alta outside. The composition avoids a conventional sequence of glossy cards. Instead, each section behaves like a room—the velvet hero, the interactive workbench, a flooded doorway, a portrait chamber, an archive wall, and an oxblood ethics salon. Repeated hairline borders and oversized, partly hidden lettering suggest old cabinets and folios. The final footer becomes canal water, reflecting the atelier’s name upside down.

The emotional hinge is the mask-maker. It should feel beautiful before it feels uncanny. Only after the visitor moves does the hidden gaze reveal itself.

02 · Visual techniques

The mechanisms

Parametric mask. In main.js, the shapes object stores path geometry for Bauta, Colombina, Volto, and Medico foundations. updateMask() swaps shell, eye, mouth, clipping-path, lacquer-gradient, and plume states without replacing the SVG. updateBrow() converts the expression slider into new quadratic Bézier control points.

Generated ornament. createFiligree() builds mirrored curls from the selected flourish count. Each SVG path is calculated from its side, row, sweep, and curl values, then animated with a short dash-offset draw. This makes gilding compositional rather than a pasted texture.

The watching apertures. Two sclera-and-iris groups sit behind clipped eye shapes. The rAF-throttled gaze routine normalizes the visitor’s pointer against both hero and workbench, translates each gaze a restrained number of pixels, and adds a slight three-dimensional stage tilt. A slow involuntary glance keeps the masks sentient on touch screens.

Candle and tide. animateCandle() changes CSS custom properties with layered sine waves, moving a blurred gold halo. It pauses when the document is hidden and is disabled by reduced-motion preferences. updateWater() combines time with scroll progress; at 78 cm it deploys the CSS walnut duckboards and moves the drawn flood plane. Repeating radial gradients, thin ripples, and an inverted footer word create water without video.

Depth and reveal. The hero uses clipped oxblood drapery, local candle flames, code-drawn SVG gilding, fixed grain, and a staggered load animation. An IntersectionObserver removes a small transform from later rooms. Content never begins transparent, so reduced-motion users and full-page captures retain every chapter.

03 · Palette & type tokens

Materials, translated

Self-hosted Italiana supplies the display voice: high contrast, fragile strokes, and generous scale. Cormorant carries body text, labels, quotations, and the small italic asides. Display lines sit near one-em line height; functional labels use uppercase Cormorant with wide tracking.

04 · Commissioned image workflow

One photographic plate

The commissioned portrait is the experience’s single photographic plate. It began as a candlelit Venetian atelier still generated with GPT Image 2 through Higgsfield, then was selected and stored locally as /assets/gen/maschera/portrait.jpg; the page never calls a remote host. The production workflow continues selected stills into Kling 3.0 through Higgsfield for restrained ambient loops, exported beside their posters. This delivery contains the still only, so the portrait room uses slow CSS scale, velvet shutters, grading, and scrims instead of inventing a missing video. Every other mask, ornament, candle, doorway, flood ripple, and reflection remains code-generated in SVG, CSS, or JavaScript.

05 · Reproduce this

Prompt the atmosphere first

Ask an AI frontend agent for a single dominant place, a tactile material system, and one interaction that changes the visitor’s role. Specify a layered inline SVG with several real silhouettes, dynamically generated ornament, pointer-reactive eyes, and controls that alter geometry—not merely color. Request a live environmental condition that changes during the session, a historically grounded archive, an explicit ethics note, responsive room-like layouts, local fonts, reduced-motion handling, and a final water reflection made entirely in CSS. Then require screenshots at phone, tablet, and desktop widths and insist that the agent name and repair concrete compositional flaws after viewing them.