01 · The concept
Discretion as interface.
The Hush imagines a 1926 bar concealed behind a stubborn night laundry. Its design avoids the usual “vintage” scrapbook treatment. Instead, the page behaves like the place: first it tests you, then it glows for you, and the moment authority arrives it produces an extremely dull explanation. The oxblood room, coded menu, fractional street address, false inspection notes, and house rules build a world in which every detail has both a public and private reading.
The signature is an actual threshold. Five taps on the door open it, whatever rhythm you choose. Here is the wink: safeStoreKnock() in main.js saves the four time intervals between taps to localStorage. On a later visit, playRememberedGreeting() replays that cadence in the brass progress lights and describes its longest pause. The door does not truly recognize a person; it recognizes a browser with excellent manners.
02 · Visual techniques
Light with a memory.
Candle physics
updateAtmosphere() samples scroll velocity once per animation frame, eases it into a bounded --draft variable, and lets pointer position contribute a gentler cross-draft. CSS uses that value to skew each flame, rotate wall frames, and shift long glass-and-candle shadows. The loop cancels when the document is hidden, and reduced-motion mode removes both the loop and the flicker.
The raid protocol
setRaid() adds one class to the body, but the whole establishment changes its testimony. Oxblood becomes legal beige; jazz posters expose washing prices; bar copy swaps for laundry copy; glassware vanishes; the table straightens into a slatted folding shelf. Paired .honest-copy and .raid-copy spans let the same semantic structure perform both stories. Five more knocks restore the evening.
Material without images
The door uses layered gradients for timber, inset shadows for panels, and pure CSS brass hardware. Glass rims are borders with translucent gin tones. A tiny inline SVG turbulence filter supplies the fixed grain layer. The restrained reveal system uses an IntersectionObserver to stagger only major compositions, keeping the atmosphere deliberate rather than busy.
The borrowed match
setMatch() turns the matchbook control into a movable light source. Pointer or touch coordinates feed two CSS custom properties on .match-light, while renderMatchLight() measures four pencilled notes and raises each note’s opacity only when the flame is near it. The work is event-driven rather than a perpetual loop; its single pending frame is cancelled when the page is hidden. Keyboard activation places the flame at a useful central position, reduced-motion removes its ignition flourish, and setRaid() extinguishes it before the room performs innocence.
03 · Palette & type
Oxblood, smoke, gin.
#170809
#4A1017
#E7A94E
#B8A68E
#C7E0D6
Candle amber is used as a sharp source, never a democratic wash. Cream carries high-contrast body copy; smoke is reserved for supporting text. The inspection state deliberately drains romance into starch, paper, and brown ink.
DM Serif Display provides the generous deco curves and eccentric italic. Jost handles navigation, labels, and prose with geometric restraint. Oversized display lines overlap the scene; tiny uppercase annotations act like labels on bottles nobody should inventory.
04 · Reproduce this
Prompt for a secret.
Ask an AI agent for a place with two contradictory identities, then demand that the contradiction become functional rather than decorative. Name one remembered gesture, one environmental force that affects the lighting, and one emergency transformation. Require local fonts, semantic landmarks, keyboard operation, reduced-motion behavior, and a visual audit at phone, tablet, and desktop widths.