Andaza — A Love Letter to Home-Style Indian Cooking

Samiya Ansari — Sun, 16 Aug 2026 17:01:29 +0000

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.

CSS Art: Comfort Food — A Steaming Bowl of Ramen

Samiya Ansari — Sun, 16 Aug 2026 16:47:38 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Ramen is the ultimate comfort food for me — it's built in layers: broth, noodles, toppings, all coming together in one bowl. That layering felt like a natural fit for CSS, where you're literally stacking shapes with z-index and border-radius to build something that reads as food rather than boxes.

Demo

https://codepen.io/Samiya-Dev/pen/01a00b6b-6006-72fc-a413-23da8310a488

Journey

The hardest part wasn't any single ingredient — it was the noodles. My first attempt used one wavy shape and it looked more like a snake than ramen. What actually worked was layering six separate rounded "strands" at slightly different rotations, widths, and vertical offsets so they overlapped like real noodles piled in a bowl.

The steam was the part I'm most proud of. It's a single blurred, gradient-filled bar per wisp, animated through opacity, vertical translation, horizontal drift, and a slight scale — so it looks like it's dissipating rather than just floating up in a straight line. Staggering the animation delays across five wisps keeps it from looking robotic.

I let myself use a little JavaScript, per the challenge rules — just enough to scatter sesame seeds to random positions on load and jitter each steam wisp's animation duration slightly, so no two page loads look quite identical. Everything else — the bowl, broth, egg, chashu, nori, scallions, chopsticks — is pure CSS: gradients for shading, transforms for the tilted chopsticks and rotated toppings, and border-radius doing most of the heavy lifting for the bowl shape.

Next time, I'd like to try animating the noodles being lifted by the chopsticks, or building a whole ramen-shop scene with a counter and bowls in the background.

DEV Community: Samiya Ansari

Andaza — A Love Letter to Home-Style Indian Cooking

What I Built

Demo

Journey

CSS Art: Comfort Food — A Steaming Bowl of Ramen

Inspiration

Demo

Journey