This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
Andaza is a landing page for an imaginary home-style Indian thali delivery service. The name comes from "andaza" — the Hindi/Urdu word for estimate or instinct — because Indian home cooks almost never measure anything. It's always a pinch of this, a glance at that, cooked until it smells right. I wanted the page itself to embody that idea instead of just describing it, so the centerpiece is an interactive spice dial: drag it and it shifts from "halka" (light) to "tikha" (fiery), changing both the copy and the accent color intensity across the hero.
Below that: a manifesto section on what andaza actually means, a menu styled as thali cards credited to fictional home cooks, and reviews styled like notes left in a tiffin box.
Demo
https://codepen.io/Samiya-Dev/pen/01a00b7f-c3a5-75ee-a315-71017babe9ac
Journey
The spice dial was both the most fun and the trickiest part. It's a conic-gradient circle where the fill angle is driven by a CSS custom property, updated live from pointer position using Math.atan2 to convert cursor coordinates into an angle. Getting the drag math right — mapping a circular drag to a 0–100 range that starts and stops at sensible points — took more iteration than I expected. I also made sure it works with a keyboard (arrow keys) and has proper role="slider" / aria-valuenow attributes, since a signature interaction shouldn't be a signature exclusion.
For the visual direction, I deliberately avoided the "warm cream + terracotta" template look that a lot of AI-generated food pages default to, and leaned into turmeric, masala-brown, and curry-leaf green instead — colors that actually come from the dishes on the menu. Fraunces for headings gave it a handwritten-recipe-card feel without going full script font.
Next, I'd like to add a second interactive moment — maybe letting visitors "build" their own thali by picking dishes and watching a plate visual fill in.
Top comments (1)
NICE