This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.
What I Built
The only image file in this project is the favicon.
No <img> tag anywhere. No inline SVG. No url() in any stylesheet. The pot, the broth, the steam, the fire, the rain running down the glass, the fog on the mountains, the moon, the roots floating in the bowl — every one of them is HTML and CSS. No photography, no icon set, no framework, no UI library, nothing loaded from another server. Check the source; that is the whole point.
Niebla is a one-page concept kitchen in the mountains of Puerto Rico, and the hook is weather instead of a menu: when the hills disappear into fog, the sancocho comes out.
It is also not a poster. You cook in it:
- Take a root out of the pot — calabaza, yuca, yautía, plátano verde, maíz. The piece leaves the CSS bowl and the live description rewrites itself for whatever is left.
- Set the simmer — low, steady, rolling. Two CSS custom properties drive the steam speed and the hue of the broth. No new markup, no re-render.
-
Take a seat — six of them, through a native
<dialog>, saved to that one device and sent nowhere. -
Read the whole thing in Spanish or English — copy, controls, and the live text a screen reader announces, with
langswitching so the pronunciation follows.
Six seats. Rain as chrome. One dish.
Why sancocho
Sancocho is not a recipe. It is a method, and that distinction is the whole reason this page works the way it does.
You start with viandas — the ground food. Yuca, yautía, calabaza, green plantain. Roots that grow in the mountains, keep without refrigeration, cost almost nothing, and fill you up. Poor people's food that turned into the thing you cook when family comes. Then broth, then whatever meat you have, then hours. You cannot rush it and there is no point trying. It is finished when it is finished.
Which is why it is rain food. You make sancocho on the day nobody is going anywhere.
And nobody makes it for one person. The pot is the unit, not the plate. It gets made in a quantity that assumes people will show up, and it is better the next day, which is its own kind of invitation.
Here is the part that decided the interface: there is no canonical sancocho. It was never written down, it was taught, so every kitchen's is different and every one of them is correct. My yautía is somebody else's ñame. That is not sloppiness, it is the actual structure of the dish.
So the page does not hand you a recipe. It hands you a full pot and lets you take things out of it. The bowl renames itself based on what is left, because that is what actually happens — you cook what you have, and it is still sancocho.
Demo
Live: https://niebla-comfort-food.vercel.app
Open it, kill an ingredient, slam simmer to rolling, set a seat. That is the whole demo.
Journey
Constraint first: if this is a frontend challenge, the food can’t be a photograph I didn’t make. The hero pot is borders, gradients, shadows, and timed steam layers. The weather layer is fixed rain that respects prefers-reduced-motion.
JS stays small on purpose:
- ingredient buttons with
aria-pressed - simmer buttons that write
--steam-speedand--soup-hue - a readout that renames the bowl (
La Completa,La Tuya,Lo Esencial,El Caldo) from how many roots are left - place card open / save / clear, focus restored when the dialog closes
- an ES/EN toggle that swaps
document.documentElement.langalong with the copy, so thearia-livebowl description announces in the language the reader is actually in
No analytics. No network after load.
What broke: first full-page QA captures came back with empty sections. Not a layout bug. An IntersectionObserver “reveal” kept content at opacity 0 until a real scroll. Headless capture never scrolls — and neither does a screen reader working down the document, or a browser with JS off. Same class of failure as a page that only becomes readable after JS animation. I deleted the reveal so the document paints complete on first load.
Measured: W3C HTML — zero messages. Lighthouse — 100 accessibility, 100 best practices, 100 SEO (perf ~94 last run). Overflow checked at 320 / 390 / 768 / 1024 / 1440 — zero at every width. Zero console errors, zero failed requests, zero external runtime assets.
Puerto Rico is in the product: sancocho, named roots, mountain weather. Not a real restaurant. Not a published family recipe. A built object.
The page that only becomes readable after a scroll animation is not finished. First paint has to carry the whole document.
MIT.
