The room before the interface
The Blue Hour Club is conceived as a jazz basement at 1 a.m., not as a hospitality landing page.
The composition borrows from a hand-set gig poster: oversized lettering nearly touches the viewport, annotations sit at the edges, and useful information emerges as the visitor descends. Smoke navy dominates. Brass appears only where lamplight or interaction should catch the eye; curtain red lands in large, controlled beats. Content is invented with enough specificity—three sets, six house drinks, a crooked 1959 piano—that the place feels occupied.
In index.html, semantic sections follow the physical journey: street-level marquee, bandstand, printed set list, house memory, bar menu, then the blue door. This makes atmosphere and usability reinforce one another.
Sound made visible
The signature moment begins only when the guest presses “Take a seat.” The gesture is both consent and theatre.
setupAudio() in main.js routes the locally hosted trio recording through a Web Audio AnalyserNode. The draw() loop samples low frequencies to control a luminous double-bass string and mid-high energy to seed translucent smoke ellipses. Rings drift upward, stretch, fade, and are capped at eighteen particles. The canvas is resolution-aware but limits pixel density to preserve frame rate.
- Drifting smoke ringsFrequency energy controls birth rate and opacity; each ring has its own rise, expansion, and lateral drift.
- Vibrating bass stringA sine path runs down the photographed instrument; amplitude follows the analyzed bass bins.
- Listening etiquetteThe loop is cancelled—not merely ignored—while paused or hidden. Reduced-motion keeps audio without visualization.
Light, grain & local key art
Atmosphere comes from several quiet layers rather than one obvious effect.
The bandstand began as a GPT Image 2 still, then moved through Higgsfield’s Kling 3.0 image-to-video workflow for an ambient loop; the source and motion assets stay local so the room never calls an external host. This page frames stage.jpg as its poster-grade key moment, color-treated beneath an animated radial spotlight, while trio.mp3 supplies the generated late-night performance.
Everything around that key art remains code-generated: SVG turbulence grain, CSS light pools, the vinyl’s radial grooves, the pointer spotlight, and the pencil-note reveal added by setWall(). The reveal observer meters the entrance; the ticker supplies the only constant graphic tempo.
Palette & typography
The type system moves between a club marquee, liner notes, and the stage manager’s clock.
#10131c
#d8a04c
#6e1f2a
#a9a8a3
Abril Fatface carries names and section entrances with tight tracking and compressed leading. Cormorant supplies sensual italic narration and readable long-form copy. Space Mono handles times, labels, prices, and navigation, always small and generously tracked.
Reproduce this
Prompt an AI agent to design a fully responsive, sound-reactive jazz-basement website that feels like 1 a.m. Ask for a dominant smoke-navy field, rare tungsten-brass accents, curtain-red interruptions, expressive editorial typography, and a single consent-based audio interaction.
Provide a local stage photograph and jazz recording. Request a Web Audio analyser that turns real frequencies into restrained canvas smoke and instrument vibration, with capped particles, hidden-tab pausing, and a reduced-motion mode. Insist on specific venue writing, an asymmetrical set list, a typographic drink menu, tactile grain, and screenshots at phone, tablet, and desktop widths. The crucial instruction is emotional: every interaction should behave like someone trying not to disturb the set.