From Skewer to Screen - A Tandoori Paneer Landing Page

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

What I Built
Welcome to Ember & Spice, a love letter to Tandoori Paneer Tikka built as a fully interactive, deeply Indian-coded landing page for a fictional restaurant. This isn't just a landing page. It's a whole vibe.

Here's everything packed inside:

🎬 Cinematic hero with a full-viewport AI-generated tandoori video, animated smoke wisps, a warm dark veil, and text that fades in like a film title

🔥 Sizzle button that sends 16 spark particles flying across the hero AND the story photo

🪔 Indian design coded into every section - a swaying toran garland in the nav, lotus SVG in the logo, Devanagari watermarks, mehndi dot patterns, Mughal arch line art, gold peacock illustrations, floating lotus petals in the Visit section, and five interactive diya lamps in the footer you can toggle on and off

🌀 Spinning ingredient tray built on bronze drum aesthetics. Drag it, spin it, click a dish, read its story, add it to your tasting plate

🌶️ Spice Dial that actually does something - slide from Mild to Fiery and watch the paneer cubes on your skewer change color in real time to match the marinade heat. Pale wheat at mild. Deep crimson at fiery. Try it

🍢 Skewer Builder where you stack paneer, bell peppers, and onions before sending them into the tandoor

🏺 CSS-art Tandoor Oven that glows, crackles with embers, and roasts your skewer

👨‍👩‍👧‍👦 Gold line-art Indian family dining illustration blended into the recipe section like it was always part of the page

📋 Interactive recipe checklist with a live progress bar

📅 Reservation form with validation (because Ember & Spice is fully booked on weekends, obviously)

Demo
🔗 Live: https://tandoori-paneer.vercel.app/
🐙 GitHub: github.com/jogadiyadipak28-art/tandoori-paneer

Journey
I chose Tandoori Paneer Tikka because it's my favourite dish and it carries so much memory. The smell of charcoal, the bright orange marinade, skewers shared at family gatherings. I wanted the page to feel as warm and alive as the dish itself.

What started as a "just build a landing page" turned into me asking "what would make this feel more desi?" at every step. And the answer kept coming. The toran. The Devanagari watermark. The diya lamps. The gold peacocks. Each element came from thinking about what Indian design actually looks, feels and moves like.

The thing I'm most proud of is the spinning ingredient tray. It took several failed attempts to get drag inertia, pointer capture, counter-rotating labels, keyboard navigation, and mini-plate integration all working together cleanly. When it finally clicked (pun intended) it was deeply satisfying.

The spice dial syncing with the skewer color is the small detail I keep showing people. It's one line of JS connecting two separate interactive panels and it makes the whole kitchen lab feel alive.

What I learned:

Building drag-to-rotate with pointer events, capture, and momentum glide from scratch
mix-blend-mode: multiply for blending illustrations into page backgrounds without a box around them
Why SVG transform-origin in CSS animations is more painful than it looks
Using CSS custom properties as a live bridge between JS state and visual output
Built with zero frameworks, zero build tools. Just HTML, CSS, and about 400 lines of vanilla JavaScript.

Now if you'll excuse me, I need to go eat some tandoori paneer. 🧀🔥