Building an entire interactive guide in one HTML file without a

A developer known as Yash K. Saini built an entire interactive cooking guide in a single 147KB HTML file with no frameworks, bundlers, or image assets, using CSS blend modes and SVG paths to render realistic food visuals and an interactive dial for cooking progression. The project, hosted at https://yashksaini-coder.github.io/comfort-food-challenge/, demonstrates that high-end interactive experiences can be achieved without heavy frameworks, offering a performance benchmark for LCP optimization.

Building an entire interactive guide in one HTML file without a 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/ Next Why httpx. → /en/threads/6342/