Blue·Hour Design guide · Site 19 of 25
How this site was made

A page that
swings.

BLUE HOUR is a fictional cellar jazz club. Its signature is invisible until you feel it: every entrance animation on the page is timed to swung eighth notes at the house tempo of 104 BPM — long-short, long-short — instead of the web's usual even stagger.

Concept

Jazz clubs on the web get either red velvet kitsch or festival-brutalism. This one aims for the actual sensation of descending the stairs: a neon sign with one unreliable letter, smoke that hangs rather than billows, brass details, and typography from the era when club signage was drawn with a compass.

Palette

Cellar midnight#0C0F1E
Horn brass#C9974B
Neon blue#7FB2FF
Smoke cream#ECE7DB

Typography

Blue Hour, nightly

Poiret One — display. Compass-drawn deco strokes; the letterform equivalent of a clarinet line.

Standards played like rumours.

Work Sans Light — body and the wide-tracked caps of the door signage.

Techniques

ElementHow it works
Swing timingEntrance delays are computed from the house tempo: pairs at 0 and 0.66 of a beat (a jazz triplet feel), not the even 0.1s stagger of default motion design. The rules cards land on the off-beats.
Neon signFour stacked text-shadows build the tube glow. One letter — the O, of course — is wired to a randomized flicker loop that mostly holds, then buzzes in 60–180ms stutters.
SmokeSixteen radial-gradient puffs drift on individual sine paths in the club's neon blue, cleared and redrawn each frame at 5–10% alpha.
VU metersEach set on the bill carries a five-bar meter that only swings on hover — alternating ease with per-bar phase delays, at the house tempo.
AccessibilityReduced motion kills flicker, smoke, meters and staggering — the sign stays lit, out of respect.

Interaction map

You doThe page does
ArriveThe room assembles itself in swing time; the neon warms up
Wait by the signSooner or later, the O misbehaves
Hover a setIts VU meter starts comping at 104 BPM
← Back downstairs