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.
Top comments (6)
As a fellow Puerto Rican, I love this ♥️
Especially the design/ UI. It is really beautiful and easy to maneuver around the website.
Thank you, that means a lot coming from another boricua.
the whole thing has no photos in it on purpose, every bit of it is css, so the comfort had to
come through in the writing and the colors or it wasnt going to come through at all. glad it
moved easy for you too, that part i went back and forth on more than anything else.
sancocho is different in every house though so im not claiming mine is the real one. how does
your family do theirs?
Do we have to create a full functioning website? can u kindly check my profile to tell me if i have to add more to join the challenge or not
no you dont need a full functioning website. there are two separate prompts and you only have to
pick one. css art is exactly what it sounds like, a picture built out of css, no site required.
perfect landing is the one that wants an actual working page. you already have the required
frontendchallenge tag on both your posts so you are in, nothing else to add for eligibility.
but i went and looked at both of yours and there is one thing i would fix before the 16th.
your chicken momos post is declared under perfect landing. that piece is css art. its a steamer
basket seen from above with the lanterns and the chili bowl and the chopsticks, and its really
good, but perfect landing gets scored on accessibility, usability and user experience, and code
quality. a picture cannot win those categories no matter how well its drawn, because there is
nothing to use. css art gets scored on creativity, effective use of css, and aesthetic outcome,
which is what you actually made. change that one declaration line at the top to css art and youre
suddenly being judged on the thing you did instead of the thing you didnt attempt.
your cozy comfort bowl is already declared css art correctly so that one is fine.
one small thing to check yourself, your codepen links are the /editor/ url with the panel and
orientation stuff on the end, which is the view you get while youre the one building it. open it
in a private window where youre logged out and make sure a stranger sees the pen. i couldnt test
it from my end so im not saying its broken, just worth thirty seconds.
deadline is the 16th at 11:59 pdt. you have time.
It's interesting, beautiful and easy to use design/user interface for maneuvering around the site.
thank you, genuinely.
one thing you might not have caught, and its the whole point of the piece. theres not a
single image on that page. no photos, and no svg either. the bowl, the steam, the shine on
the broth, all of it is divs and css.
the only image file in the entire project is the favicon, which is where the title comes
from.
so beautiful and easy to move around is the exact pair i was hoping for, because the
constraint was seeing how far you get with nothing to actually look at. glad it read as a
place.