Yoru Ramen 夜ラーメン — A Late-Night Tokyo Ramen Shop | Perfect Landing

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

What I Built

A moody, atmospheric landing page for Yoru Ramen (夜ラーメン) — a fictional late-night Tokyo ramen shop tucked in a Shinjuku back alley.

Ramen is the perfect example of comfort food; it's the dish you have at midnight when there's nothing else to eat. I wanted to convey that feeling, including the warmth of a lantern in the rain, the presence of an 8-seat counter, and a bowl of broth which had taken 18 hours to make. The page tells this story.

Demo

CodePen Run link here: https://codepen.io/editor/Elsie-Raine/pen/019fb1ac-7c3d-77ca-ad43-a2899488b733

Features

• 🍜 Animated ramen bowl — hand-crafted SVG with CSS steam rising from the broth
• 🌧️ Live rain animation — canvas-based rain streaks set the late-night Tokyo mood
• 🏮 Tokyo alley scene — illustrated SVG of a rain-soaked Shinjuku alleyway with a glowing lantern and noren curtain
• 📋 Full menu section — 6 ramen dishes with Japanese names, descriptions, and pricing
• 🗺️ Hours + illustrated map — custom SVG street map of the fictional location
• ✨ Scroll-triggered reveal animations — elements fade up as you scroll
• 📱 Fully responsive — works on mobile down to 375px
• ♿ Accessible — respects prefers-reduced-motion, semantic HTML throughout

Journey

I wanted the comfort food to have a natural, lived-in look, not merely resemble a standard photograph of a restaurant. For that reason I created all the elements as SVGs: the ramen bowl, the Tokyo alley, and even the map. The rain effect was the final touch which brought the entire late-night atmosphere to life.

The hardest part was the illustration of the bowl. It took many trials to get the colour of the broth, the layers of the noodles, the chashu pork, and the soft egg to be clearly visible at small sizes. The timing of the steam animation was also difficult: if it was too fast, the effect looked jittery; if it was too slow, it seemed lifeless.

In terms of design I used a deep charcoal colour scheme with amber as the only warm colour, without featuring a hero image, the atmosphere instead being completely created through code.