Karachi Ki Raatein: A Love Letter to Midnight Street Food

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Karachi Ki Raatein ("Karachi's Nights") — a single-page love letter to the street food that keeps my city awake after dark.

Instead of a restaurant or a recipe box, I built it around a real pattern from home: Karachi basically runs on an unofficial food schedule. Maghrib means chai and something fried. Bun kabab happens standing up, mid-errand. Nihari is what you sit down for after Isha. Seekh kabab shows up wherever there's smoke. And halwa puri at 3am is for the people who never went to sleep in the first place. The whole page is built around that rhythm instead of a menu.

A few things I'm happy with on the frontend side:

• A signboard hero with a flickering neon-style headline and hand-drawn CSS/SVG steam rising from a cup — no stock photography anywhere on the page, everything is drawn.
• A canvas-based particle steam system that replaces the static SVG once JS is available — real particles with drift, turbulence and upward acceleration, and they physically scatter when you move your cursor through them, like waving your hand through actual steam.
• A live "Night Clock" that reads your real local time (Date, your timezone, nothing hardcoded) and marks whichever stall is "in season" right now with a pulsing "you are here" badge — so the page behaves differently depending on when you actually open it.
• A theme built for the medium: dark ink background, ember/turmeric accent colors, a hand-lettered chalk font for the "voice" of the thela-wala mixed with a bold display face for the signage, instead of the usual cream-and-terracotta food-site look.
• Respects prefers-reduced-motion everywhere (falls back to a static SVG steam loop and skips the canvas sim), keyboard-focusable throughout, fully responsive.

Demo

Journey

I wanted to avoid the obvious comfort-food landing page — cream background, terracotta accents, a hero photo of a steaming bowl. It's a solid look but I see it everywhere, so I picked a different comfort food entirely: Karachi street food at night, which nobody really photographs well anyway because it's lit by a single tube light and a lot of smoke. That constraint ended up shaping the whole design — dark background, glow instead of gradients, hand-drawn icons instead of photography.

The part I'm proudest of is the canvas steam simulation. I'd used CSS animation loops for effects like this before, but this time I wanted actual particles — spawning, drifting with a bit of turbulence, fading in and out over their lifetime, and reacting to the pointer with a proper radius-based push force. Getting the particles to feel like steam instead of confetti took some tuning: slow upward acceleration, gentle sideways drift from a sine wave, and additive blending (globalCompositeOperation = 'lighter') so overlapping particles glow instead of just stacking opacity.

The "Night Clock" was the other fun problem. I didn't want a generic numbered timeline, so I mapped it to real hours using the visitor's own device clock, with wrap-around logic for the ranges that cross midnight. It's a small thing, but it means the page quietly tells the truth about whether it's actually nihari o'clock for you right now — and if it's the middle of the afternoon, it says so instead of pretending.

What I learned: building the particle sim pushed me to actually understand requestAnimationFrame timing and additive canvas blending instead of just reaching for a library. I also spent real time on prefers-reduced-motion and keyboard focus this round instead of treating them as an afterthought, since I've been more accessibility-conscious in my other frontend work lately.

No license added yet — happy to open-source it under MIT if anyone wants to riff on it.