Spicing Up the Web: Building "Angaar", an Immersive Indian Comfort Food Experience

#frontendchallenge #devchallenge #javascript #webdev

Frontend Challenge Perfect Landing Submission 🍲🥧

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

What I Built

I built Angaar (अंगार) — an immersive, cinematic landing page for a fictional high-end Indian comfort food restaurant. Angaar means "ember" or "burning coal" in Hindi — the living heat at the heart of every Indian kitchen.

The "Comfort Food" theme hit me personally. Indian comfort food isn't just dal and roti — it's the smell of a clay chulha, the sound of a pressure cooker, your Naani's voice telling you to eat more. I didn't want to just display food. I wanted to build that feeling.

So instead of a clean-grid restaurant template, I built an atmosphere:

🪔 An animated SVG diya (oil lamp) at the hero — three layered CSS flame elements with staggered alternate timing
🎭 A theatre-curtain preloader revealing the page with an SVG lotus and the phrase "Lighting the flame..."
🍛 A horizontal immersive scroll for the menu, so exploring dishes feels like a curated journey
✨ A dual-layer custom cursor — a fast dot and a slow glowing halo — both running on a single RAF loop
🌶️ Floating spice particles and rising ember effects that make the page feel alive
🏯 Authentic Dravidian/Hindu-Aryan temple motifs (gopuram silhouettes, jali lattice, kolam dot-grids, trefoil arch friezes) worked into the background of every section

The color palette follows spice rack logic: Saffron (#E8732A), Turmeric (#DAA520), Cardamom (#4A7C59), and Masala red (#C62828) on a near-black base (#060503).

Demo

🖥️ Best experienced on desktop for the full cursor, parallax, and particle experience — but fully responsive on mobile too!

Journey

When I saw this challenge, I made one creative decision upfront: no Mughal aesthetics.

Most Indian-themed web designs default to Mughal ornamentation — the same lotus filigree and marble inlay patterns. It's beautiful, but it's also the generic visual shorthand. For a restaurant built around the chulha — which is quintessentially rural, humble, and Dravidian in character — I needed a more grounded visual language. So I went with South and North Indian temple architecture instead: gopuram skylines, jali screens, kolam rangoli, corbelled arches. It made the site feel rooted rather than decorative.

The Technical Process:

The sticky scroll was my favorite system to build. Each section is position: sticky with stacked z-index, so they layer over each other as you scroll — like film reels — using zero scroll-jacking:

.section {
  position: sticky;
  top: var(--nav-h);
  box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
}

The menu carousel was another fun problem. Instead of tracking a hardcoded active index, I detect the active slide by finding whichever slide's center is geometrically closest to the scroller's viewport center — so it stays accurate on any screen size:

const scrollerCenter = scroller.scrollLeft + scroller.clientWidth / 2;
slides.forEach(slide => {
  const slideCenter = slide.offsetLeft + slide.offsetWidth / 2;
  const diff = Math.abs(scrollerCenter - slideCenter);
  if (diff < minDiff) { minDiff = diff; closest = slide; }
});

The section title split-text animation uses a recursive DOM walker that splits characters while safely skipping <br> and <span> elements. Each character fades in with a rotateX(-45deg) → 0 fold-in effect, staggered at 30ms per character — no GSAP needed.

What I'm proud of:

Doing everything — the preloader, parallax, carousels, cursor, particles — in pure vanilla HTML, CSS, and JS with zero animation libraries. The constraint forced me to really understand requestAnimationFrame, IntersectionObserver, and CSS mask-image techniques I wouldn't normally reach for. The bilingual section labels (मेनू · THE MENU, अनुभव · THE EXPERIENCE) were also important — the cultural grounding needed to be linguistic, not just visual.

What I learned:

Getting the animated diya flame to feel alive (not like a looping GIF) took far more iteration than expected — three separate <div> elements on slightly offset alternate timing cycles, at different blur levels, was the key. And mix-blend-mode: screen on the cursor glow halo was a small discovery that made a big visual difference — it only brightens content beneath it without washing out the dark background.

What's next:

I'd love to connect the reservation form to a WhatsApp Business API, add dish modal expansions with spice profiles and chef's notes, and experiment with a toggleable ambient crackling fire sound to push the atmosphere even further.