19 · The Night Owl: a 24-hour diner whose chalk wall runs on a clock

The Night Owl is a made-up all-night diner on Route 9 in Calder Falls ("Pie all night"). The whole page is its chalkboard wall, lit by one neon owl sign. What makes people stop is that a clock runs everything: drag the wall-clock scrubber and the wall recolors, an eraser wipes the specials board and rewrites it, the neon dims or brightens, and a split-flap board spins to the pie of the hour. Further down you can build a real pickup ticket with tax and slide it onto the kitchen rail.

Inspiration

This is the Chalk / Handmade theme from the new kit, pushed from Calm-Medium toward Medium-Loud. The borrowed ideas:

Added on top: a layered SVG neon owl and neon letters with a stuttering W, a hand-built split-flap with real top and bottom leaves, a time engine with a ?at=23:30 override, and a working order pad with a flying ticket.

Visual direction

Theme, kit and licenses

References

Why these choices

A diner visitor wants four things: what is on now, the menu, ordering ahead, and how to get there. The page puts each in its own section, so the show never blocks a task. The clock is the idea that earns the effects: the shifts, the pie of the hour and the neon level all follow real time, so the page is true to the minute for anyone who visits.

Trade-offs the code shows: the top bar is solid so nothing blurs over moving content. Reduced motion turns off the writing, flicker, eraser and flap spins, and the sign defaults to steady. If Paper fails to load, the CSS wall stays. Sound is off until asked. The flap is capped at 14 flips per tile so a big jump does not spin for ages. The map scrubs with scroll instead of playing once, so it feels earned.

Who this kind of site is for

It wins for diners, cafes, bakeries, bars and anywhere "what is on now" changes through the day. The ordering pad suits small takeout places that want a friendly front end, though it is a demo: nothing is sent anywhere. It is the wrong call for a clinic, a law office or anyone whose visitors want the facts in five seconds without a show.

Add ?at=23:30 to the address to see the late-night version during the day. For a real client, swap the specials, pies, menu and map and wire the pad to their real order flow.

How to make it

Stack and key techniques

The prompt

Build a single-file website (no build step) for "The Night Owl Diner", a fictional 24-hour diner at 1190 Route 9, Calder Falls. Tagline "Pie all night." The page is the diner's chalkboard wall, and a neon owl sign is its only light source. A clock runs the whole page.

Visitors need: what is on right now, the menu, order ahead for pickup, hours, and how to find it.

Palette: board #1f2a24 (wall shifts to #1a2430, #22322a, #141c18), chalk #f2efe6, neon #ff4f8b, mustard #f2b134, ticket paper #fbf6e9. Fonts: Caveat Brush and Caveat for chalk, Tilt Neon for the sign, Space Mono for tickets and labels. Use GSAP 3.15 with ScrollTrigger, DrawSVG and Draggable from jsDelivr. Use the Paper Shaders paper-texture as a fixed chalkboard and Text Effects chalk and stamp parts if available; otherwise fall back to CSS.

Signature moments:
1. Hero: the headline "Pie all / night." writes itself in chalk through a zigzag pen mask while a chalk stick and falling dust follow. A layered SVG neon owl and the words NIGHT OWL DINER flicker on in a stutter and light the wall. Afterward the W stutters now and then and the owl's eyes blink.
2. Right now: an SVG wall clock and a 15-minute scrubber drive four shifts (Early Birds 4 to 7, Breakfast 7 to 3, Dinner 3 to 10, Late Night 10 to 4). A shift change recolors the wall and accent, dims or brightens the neon, and an eraser swipes across the specials board before the new text writes in. A split-flap board shows the pie of the hour and its price; each tile uses real top and bottom leaves and caps at 14 flips. Add `?at=HH:MM` to fake the time.
3. Order: menu tabs with line-drawn doodles; tapping adds to a paper ticket coming out of a printer, with quantities, 7.35% tax, name and pickup time. Slide-to-send (Draggable plus a keyboard fallback) flies the ticket onto a steel rail as a small slip with a stamp; open a slip in a dialog. Validate empty tickets and missing names.
4. Find us: a hand-drawn chalk map where the road and river draw on scroll and a car drives to the lot. Put the covered bridge where road meets river by measuring.

Constraints: all art is drawn in code. Solid sticky bar, no blur over moving content. Honor prefers-reduced-motion (steady sign, no writing, instant flips). Sound off by default. No horizontal scroll at 390 or 1440 px. Cap work for phones.

Verify: screenshot at several scroll stops at 1440 and 390, test the scrubber, back-to-now, empty-ticket and no-name messages, quantity minus, keyboard send, drag send, rail dialog and Escape. Read the console for errors, fix, and repeat.

Build notes

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. The builder was Opus 5.5 working from the tested kit; the question here is how much the kit carries for Sonnet 5.5.

Feature Sonnet 5.5 with this kit Sonnet 5.5 from a blank page
Paper chalkboard wall recolored per shift Does fine; the mount and set calls are kit code Attempts it with likely bugs: the shader throws if textures are not loaded first, so it likely falls back to a CSS gradient
Chalk slate and rubber stamp Does fine, with the scoping already handled Likely simplifies to plain styled text; the stamp is probably flat
Chalk headline writing through a pen mask Attempts it with likely bugs: the pen path does not line up with the text after the viewBox is refit Likely simplifies to a clip-path wipe with no moving stick or dust
Neon owl and stuttering letters Attempts it with likely bugs: flicker timelines stack up and leave letters at the wrong opacity after a shift change Probably a CSS glow animation on one flat SVG; the layered tubes would not appear
Split-flap with real leaves Attempts it with likely bugs: leaf timing and the hidden-leaf states drift Likely simplifies to a fade or slide between letters
Shift engine, eraser, ?at= override Does fine on logic; the eraser timing is likely less polished Attempts it with likely bugs: wall color transitions and the eraser clash with each other
Order pad with Draggable send and flying ticket Attempts it with likely bugs: a cloned ticket stealing radio state, as the builder hit Likely works but plainer: a button instead of slide-to-send, no flight
Map: scroll-drawn road and driving car Does fine with DrawSVG; the bridge placement is likely hand-guessed Attempts it with likely bugs: the car path and drawn road diverge

Rough overall estimate, as a judgment call: Sonnet 5.5 with the kit likely keeps about 70 to 85 percent of the visual impact; from a blank page, perhaps 45 to 60 percent. The kit parts carry the wall, the chalk and stamp, and the library setup. What the kit cannot carry is the hand-written choreography: the sign, the flap and the flying ticket. A screenshot loop and splitting the build into the sign, the clock and the pad would likely close most of the gap.

← Previous reportNext report →