This is a submission for Frontend Challenge - Comfort Food Edition Perfect Landing.
Gravy Theory is an interactive field guide to North Indian gravy, built around a single claim:
Butter chicken and chicken curry are not different recipes. They are the same onion–tomato masala, stopped at different moments and finished in different directions. Chilli chicken never touches it at all.
Recipes give you minutes. Cooks give you colour. So the page is organised around the thing a recipe can't hand you — the ability to look at a pan and know where you are.
It's best understood by dragging the dial rather than reading about it: open the live demo (source).
| | | | ---------------- | --------------------------------------------------------------------------------------------------- | | The base | A dial that cooks the masala from raw to done. Six ingredients light up as you pass their stage. | | The split | Three dishes, tabbed, each showing what it adds on top of the shared base. | | The fork | One pan divides into two along drawn curves while a wok slides in from the right and stops short. | | The clock | Where the time actually goes. Butter chicken is the only one needing two burners. | | Green chilli | Heat plotted against aroma on a log scale. The Indian green chilli sits where nothing else does. | | The dabba | Seven tins, seven jobs — and what breaks when each one is missing. | | Tonight | Three questions. It's a constraint problem, not a taste problem. |
Every pan, thali, katori, roti, chilli, spice tin and ingredient is drawn in CSS gradients and inline SVG. No build step, no framework, no bundler, no icon font, no CDN, no tracking. The only external request is Google Fonts.
{% cta https://yashksaini-coder.github.io/comfort-food-challenge/ %}Cook the base →{% endcta %}
Best on a real screen — the dial, the tabs and the fork scene all want a pointer or a thumb. It works from 320px up, and with JavaScript switched off.
Plain links, in case the embeds above don't render for you: Live demo — Source — (MIT)
My first pass at the butter chicken looked like a donut chart. Orange disc, gradient, a white wedge for the cream. Technically food-coloured; emotionally a pie chart.
What fixed it wasn't more detail. It was realising that real food has three separable optical layers, and I had collapsed two of them into one: an opaque pigmented base a subsurface glow — light entering the material, scattering, coming back warmer a specular glint — a hard reflection off the fat on top
The glow is big, blurry and coloured. The glint is small, sharp and near-white. Merge them into one soft highlight and you get plastic every single time.
The other half of it: commit to one light source and never break it. Everything on the page is lit from the upper right (--lx: 78%; --ly: 18%). Mismatched light direction is the fastest way to make something read as drawn rather than lit.
Inline SVG filters do the work CSS can't: a feTurbulence + feDisplacementMap pair gives gravy a ragged edge instead of a perfect circle, a gooey feColorMatrix makes cream dollops fuse with surface tension rather than stack like stickers, and thresholded noise paints tandoor char onto the chicken.
The rule I set myself: no filter animates its own parameters. Animating baseFrequency or seed regenerates Perlin noise on the CPU every frame and drops a phone to single-digit FPS. The steam filter is completely static — only the source element translates.
That char filter also taught me something I didn't know. My first version rendered nothing:
fractalNoise alpha clusters tightly around 0.5 and essentially never reaches 0.857, so the soot layer was empty. A linear stretch puts the threshold where the data actually lives: