Building an entire interactive guide in one HTML file without a

I've been looking at a project called "Gravy Theory" that manages to explain the chemistry of North Indian cooking using nothing but CSS gradients and inline SVGs. The core premise is a great bit of prompt engineering for the brain: it argues that butter chicken and chicken curry aren't different recipes, but rather the same onion-tomato masala stopped at different stages of the cook.

The technical execution is where this gets interesting for anyone into frontend performance or AI-assisted coding. The entire project is a single 147KB index.html file. No React, no Tailwind, no bundlers, and zero image assets. If you're trying to optimize for LCP (Largest Contentful Paint), this is the gold standard.

How the "Food Look" was achieved

The most impressive part isn't just the lack of images, but how the author handled the visual rendering of food. Most developers try to make "liquid" or "sauce" using a simple radial gradient, which usually ends up looking like a plastic donut chart.

To get a real-world look, the author broke the visuals into three distinct optical layers:

• The Pigmented Base: The solid color of the gravy.
• Subsurface Glow: This mimics light scattering inside the food, creating a warmer, blurred effect.
• Specular Glint: A sharp, near-white reflection that simulates fat/oil on the surface.

When you combine a wide, blurred glow with a tiny, sharp highlight, you stop seeing "CSS shapes" and start seeing "food." Here is the actual CSS logic used to create that depth:

/* subsurface — wide, offset toward the light, blurred, screened */
.kadai__pool::before {
 background:
 radial-gradient(
 58% 44% at 66% 30%,
 #f0a03c7a,
 #d6431f2e 54%,
 transparent 74%
 ),
 radial-gradient(34% 26% at 33% 68%, #f0a03c54, transparent 72%);
 filter: blur(9px);
 mix-blend-mode: screen;
}
/* specular — tiny, hard, warm-white. This one line is the difference. */
.kadai__lit::before {
 width: 15%;
 aspect-ratio: 2.1;
 background: linear-gradient(100deg, #fffdf4, #ffe9be 62%, #ffd79200);
 rotate: -22deg;
 filter: blur(1.1px);
 mix-blend-mode: screen;
}

The Interactive Workflow

The project functions as a practical tutorial on cooking. Instead of a wall of text, it uses a dial that the user drags to "cook" the masala. As you move the dial, ingredients light up in real-time to show the progression from raw to done.

It also handles complex visual storytelling through CSS:

• The Split: Tabs that show how the same base diverges into different dishes.
• The Fork: A visual animation where a pan divides into two paths, while a wok (used for Chilli Chicken) stays separate.
• The Clock: A breakdown of actual time spent, highlighting that butter chicken is the only dish requiring two burners.

For anyone building an AI workflow or a landing page, this is a reminder that you don't always need a heavy framework to create a high-end interactive experience. Sometimes, a deep dive into CSS blend modes and SVG paths is more efficient than any library.

https://yashksaini-coder.github.io/comfort-food-challenge/