01 · CONCEPT
Loneliness with the coffee still hot
The site begins outside and ends inside. Its establishing image is staged like a Hopper nocturne: street darkness holds the left side while tungsten windows gather life on the right. The copy never sells a diner so much as offers refuge from the hour. Every section advances that threshold—street, pie case, booth, jukebox, then the sign that admits nobody remembers the key. Asymmetry keeps the page from feeling like a restaurant template; details such as June’s shift, a missed bus, and the sold apple slice make the fictional room socially specific.
02 · THE GLASS
Rain you can almost focus past
The foreground is canvas[data-rain], driven by the Drop class in main.js. Each bead draws an elliptical gradient; drawRefraction() clips a shifted fragment of the plate inside larger drops, while mergeNearbyDrops() joins touching radii. Pointer movement updates --wipe-x and --wipe-y to clear condensation. Counts are bounded, DPR is capped, and visibilitychange pauses the loop.
03 · ASSET WORKFLOW
One still, taught to breathe
The establishing plate began as a GPT Image 2 still made through Higgsfield, then Kling 3.0 animated that exact frame into the five-second rain-and-neon loop. Both are stored locally as diner.jpg and rain.mp4; the image is also the video poster. syncFilm() pauses the loop offscreen, when the tab is hidden, and for reduced motion. Every other visual—drops, neon, chrome, vinyl, paper, bell, and steam—remains code-generated.
04 · LIGHT & RHYTHM
A bad ballast, timed precisely
Monoton appears only once, turning NIGHTHAWK into an object rather than a headline style. The H sits in its own .faulty-h span. The faultyBallast keyframes use stepped, irregular blackouts—several fast failures, a long recovery, then one late shudder—while layered teal shadows sell the glass tubing. Red is reserved for emotional punctuation and jukebox trim; tungsten becomes the readable interior field. A fixed SVG-noise veil, soft radial auras, inset metal highlights, paper fibers, vinyl channels, and imperfect rotations prevent the code-built surfaces from feeling sterile.
05 · TYPE & INTERACTION
Menus, labels, and things with weight
Zilla Slab carries prices, stories, and headings; Manrope handles small caps and wayfinding. Tabular figures and dotted leaders borrow counter-menu grammar. IntersectionObserver stages arrivals, while selectPie() prints a live guest check and the keyboard-operable bell answers through aria-live. Jukebox buttons also expose pressed state. Mobile rows stay at least 44 pixels and focus uses a tungsten outline.
06 · REPRODUCE THIS
Prompt for a place, not a page
Ask an AI agent to build a nocturnal, story-rich business as one continuous atmosphere. Name one cinematic reference, one exterior weather condition, one interior temperature, three strict colors, and a single physical signature effect. Require semantic HTML, local assets, responsive screenshots, reduced motion, and a clean network audit. Demand invented evidence—staff names, prices, timestamps, scuffed surfaces, and overheard stories—and ask the agent to describe the exact canvas functions and CSS layers it used. The useful prompt is not “make a diner website.” It is: “make me feel the wet sleeve cooling while the cup warms my hands.”