09 · Blue Hour: a jazz listening bar on a live fluid-ink simulation
Blue Hour is a made-up 38-seat hi-fi bar in "Port Halloway", built as a stack of album sleeves floating over a real-time fluid simulation. What makes people stop is the background: smoke and ink that curl, rise and soak into paper as you move the cursor, change colour and mood with each section, and throw a splash of ink for every note when you press "Drop the needle" and the page starts playing synthesized jazz.
Inspiration
- Cult UI, shader-led hero (Fluid Rendering, Hero Liquid Metal): the idea of a GPU-driven hero. Here it is a real stable-fluids solver, not a decorative shader. Cult UI's texture overlay inspired the paper grain on the sleeves.
- Aceternity UI, SVG Mask and Canvas Text: the giant LISTEN letters. In the code they are black-on-white text with
mix-blend-mode:multiply, so the letters act as a window onto the ink behind. - NEAT and the Stripe-style gradient: each section re-keys the palette, and the display shader adds grain and a vignette.
- Trend picks: kinetic oversized type and a blend-mode cursor (a difference-blended dot that grows over links and rows).
- 1950s and 60s jazz sleeves: catalog box ("BH 1959"), "Side A / Track 01" labels, and a nav styled as a back-cover track listing with durations.
- Added on top: two shading modes for the same dye (additive smoke on black, subtractive ink on paper), synthesized jazz whose notes drive the ink, and a working reservation slip.
Visual direction
- Palette: ink
#0c0b0a, paper#efe6d2, cobalt#2347d9, vermilion#e2401f, mustard#e0a41b, teal#1c8a84. - Fonts: Anton for giant condensed caps, Instrument Serif italic for ledes and dish names, Archivo with its width axis (condensed to 80 to 84 percent) for tiny tracked labels.
- Motion: slow and smoky. Seven scenes, each with its own choreography: a lamp plume (hero), brush strokes (program), ink drops (listen), two orbiting points like a spinning record (system), a pour (bar), slow strokes (rules), and two plumes leaning together (reserve). On a scene change the old dye is flushed fast, then the new palette bursts in.
- Layout: asymmetric 5/7 splits, with anything you read on an opaque cream or black sleeve card. Headlines sit straight on the ink using difference blending, so they stay legible on both black and paper.
- Signature moments: the HERO "BLUE HOUR" letters rising one by one with a tilted serif "a listening room" knocked through them; a CSS vinyl with conic sheen and an SVG tonearm that swings down when sound starts; the LISTEN window; row hover that wipes vermilion across the program; the reservation slip that turns into a ticket stub.
References
- Cult UI, https://www.cult-ui.com: shader-led hero concept (Fluid Rendering, Hero Liquid Metal) and the texture-overlay grain.
- Aceternity UI, https://ui.aceternity.com: SVG Mask and Canvas Text, rebuilt as the multiply-blend LISTEN window.
- NEAT, https://neat.firecms.co: per-section palette re-keying, grain, vignette.
- Stripe mesh gradient recreation (minigl by jordienr, whatamesh by Kevin Hufnagl): the idea of a living colour field behind the page, here replaced by a fluid solver.
Why these choices
A bar that sells a mood needs the page to feel like the room: dim, warm, slightly smoky, and quiet until you ask for sound. A fluid sim gives that without any image files. Sound is off by default and only starts on a click, which respects browser rules and people in open offices.
The trade-offs are visible in the code. Small text moved onto solid chips and sleeves because dye washed it out. The sim is capped (144 short side on desktop, 112 on phones or coarse pointers, dye at 640 or 448), device pixel ratio is limited to 1.5, and the render loop pauses when the tab is hidden. Fallbacks are real: no WebGL2 or no float render targets gives blurred CSS gradient blobs, prefers-reduced-motion slows the physics and cuts transitions, a lost WebGL context switches to the fallback, and the form works with keyboard focus and aria-live errors. Fonts come from Google Fonts, the only external request.
Who this kind of site is for
It wins for bars, venues, record shops, labels, studios, restaurants, distilleries and tattoo shops: any brand selling a mood, where the real content is a short menu, a schedule and a booking form.
It is the wrong call for anything content-heavy or transactional (a store with a hundred products, a clinic, a legal firm), for audiences on old phones, and for clients who need fast first paint above all. The always-running GPU work costs battery.
How to make it
Stack and key techniques
- One HTML file, no libraries, no build step, about 1,270 lines.
- Raw WebGL2 stable-fluids solver on half-float targets: advection, curl and vorticity confinement, divergence, 18 Jacobi pressure passes, gradient subtract, plus a curl-noise and buoyancy force pass.
- Display shader with two shading modes, gradient-based lighting, a lamp falloff, paper fibre, grain and vignette.
- Scene system: seven scenes with eased physics values and scripted "performances" that splat dye.
- WebAudio trio: walking bass, noise brushes, FM electric piano, generated convolution reverb, lookahead scheduler, and a note-to-ink queue.
- CSS vinyl, tonearm, difference-blend headlines, multiply-blend window letters, form validation with night-dependent set options.
The prompt
Build a single-file website (index.html, no libraries, no build step) for "Blue Hour", a fictional 38-seat hi-fi listening bar and jazz room in "Port Halloway". The concept: the whole site is a set of album sleeves floating on a live fluid-ink simulation.
Visual direction: 1950s and 60s jazz record sleeves. Palette: ink #0c0b0a, paper #efe6d2, cobalt #2347d9, vermilion #e2401f, mustard #e0a41b, teal #1c8a84. Fonts from Google Fonts: Anton for giant condensed caps, Instrument Serif italic, Archivo (width axis) for small tracked labels. Include a catalog box ("BH 1959"), "Side A / Track 01" labels, and the nav as a back-cover track listing with durations.
Background: write a real stable-fluids solver in raw WebGL2 on half-float targets (advection, curl, vorticity confinement, divergence, about 18 Jacobi pressure passes, gradient subtract) plus a curl-noise and buoyancy force pass. Sim at about 144 and dye at 640 on the short side, lower on phones. The display shader has two modes for the same dye: additive smoke under a lamp on black, and subtractive ink soaking into paper with fibre and grain. Add a vignette. Pointer, touch and scroll stir the ink.
Scenes: seven sections, each re-keys palette, paper or black, physics and choreography: lamp plume (hero), brush strokes, ink drops, orbiting points, a pour, slow strokes, two plumes leaning together. On a scene change, flush old dye quickly, then burst in the new palette. Ease physics values.
Type: huge headlines set straight on the ink using mix-blend-mode difference. All reading text goes on opaque cream or black sleeve cards. The LISTEN section is giant letters acting as a window onto the fluid (multiply blend). Hero has a CSS vinyl with sheen and an SVG tonearm that drops when sound starts, and a blend-mode cursor dot.
Sound: off until the user clicks "Drop the needle". Synthesize with WebAudio only: walking bass, noise brushes, FM electric piano, generated reverb, lookahead scheduler, and every note throws ink into the fluid.
Content: weekly program (Wed to Sun with times and prices), a technical-spec sleeve for the sound system, a short drinks and snacks menu, six house rules, hours (dark Mon and Tue), and a working reservation slip: validate name, email and date, reject Mondays and Tuesdays, change the set options by night, then show a ticket stub. State clearly that it is a fictional venue.
Constraints: no external images; handle prefers-reduced-motion; CSS gradient fallback if WebGL2 or float targets are missing; pause when the tab is hidden; keyboard focus visible; no horizontal overflow at 375px.
Verify: screenshot every section at desktop and phone width, run the solver ahead a few seconds first, check console errors, test the form, sound toggle and no-WebGL fallback, fix problems, repeat. Report anything you could not test.
Build notes
- Small text was moved onto solid chips and sleeves after early screenshots showed it washing out over the dye.
- The black-to-paper flip runs on wall-clock time, so it stays quick on slow machines. The solver uses a capped time step.
- Resize only rebuilds the sim when the width or aspect really changes, which avoids restarts from phone address-bar wobble.
- The first frame is pre-seeded and run for 26 steps so the page never opens on an empty canvas.
- The audio scheduler looks further ahead when the tab is hidden, and the note-hit queue is trimmed.
- Untested, per the builder: the audio has not been heard by ear, real-GPU performance is unmeasured (checks ran on a software renderer), and difference-blended headlines dip in contrast during the roughly 0.4 second flip, and can look tinted over dense multi-colour ink.
Stepping down: what you would likely lose
This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so the reasoning rests on the spec table, Anthropic's own pages, earlier-generation reviews and extrapolation from tier.
| Feature | Opus 5.5 (likely outcome) | Sonnet 5.5 (likely outcome) |
|---|---|---|
| Multi-pass fluid solver (curl, vorticity, 18-pass pressure) | Likely does fine; a small bug such as wrong boundary handling or unstable velocity is possible | Attempts it with likely bugs: dye that fades too fast, or a sim that blows up or looks flat |
| Two-mode display shader (smoke vs ink on paper) | Likely does fine on the core look, with fewer touches like lamp falloff and paper fibre | Likely simplifies to one mode, or a plain paper tint with weak ink-soak realism |
| Seven choreographed scenes with flush-then-burst transition | Likely does fine, with some scenes feeling similar | Likely simplifies: one palette swap with fewer distinct performances |
| Difference-blend headlines and multiply LISTEN window | Likely does fine | Attempts it with likely bugs: letters unreadable on mid tones, or the window not passing the fluid through |
| Synthesized jazz with note-to-ink queue | Likely does fine on the audio chain; timing drift possible | Likely simplifies to a basic loop, or attempts the scheduler with a clicking or drifting bug |
| Vinyl, tonearm, track-listing nav, sleeve details | Likely does fine | Likely does fine, but more template-like |
| Reservation slip with night-dependent sets and stub | Likely does fine | Likely does fine |
| Fallbacks, reduced motion, resize and hidden-tab handling | Likely does fine if asked for | Likely attempts it with bugs in rarely used paths (resize, context loss) |
Judgment call: Opus 5.5 would likely keep roughly 80 to 90 percent of the visual impact in one pass, and Sonnet 5.5 roughly 55 to 70 percent. The gap between Fable 5.1 and Opus 5.5 is probably small here, since the work is mostly careful GLSL plus layout; the evidence is thin. A screenshot feedback loop, plus building the solver and the audio as separate steps, would likely close much of the Sonnet gap.