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
alternatetiming - 🎭 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.
Top comments (2)
The landing page looks good with the rangoli and temple architecture.
Thanks Bro, Appreciate it!!