This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
Comfort food, for me, is a full table, not a single plate.
ঘরের থালি / Ghorer Thali means “homemade thali.” The dishes I grew up around on heavy evenings and guest days: light Peshawari meat in namkeen-style broth with bone and potato, thick beef curry, and chicken biryani under dum. Steam, spice bowls, lemon, naan, a spoon at the edge of the cloth.
I wanted that whole feast painted in CSS. Bangla is the default language because that is how the table talks at home. English is a guest toggle.
Live Url: https://kporus.github.io/Ghorer-Thali/
Demo
Stack: HTML + pure CSS (gradients, layering, keyframes) + a little vanilla JS (language, steam pause, dish focus). No canvas, no images for the food.
Try this
- Click a dish to spotlight it: others dim, aroma / steam rises, a short note appears in Bangla or English
- Click again to clear focus
- Toggle বাংলা / English
- Pause steam for a still frame
Three dishes sit in one composition:
- Peshawari glass tray: broth, marrow bones, potato, peppercorns, chilies
- Biryani handi: saffron rice, fried onion, mint, boiled egg, and two bold cartoon chicken legs (meat + white bone + twin knobs) so the chicken reads instantly
- Beef curry bowl: thick gravy and bone-in chunks with meat grain
Around them: lanterns, spices, lemon, naan, salad, oil lamp.
Journey
I started with bowls and a tray. Shapes are easy. Making food readable is not.
The biryani chicken taught me the most. Realistic texture kept melting into saffron rice. After a few passes, I went the other way: cartoon drumsticks with a thick dark outline, orange meat, and a clear white bone. Silhouette first. The rest of the scene could stay richer; the chicken just had to be obvious at a glance.
On the beef and Peshawari side, I stacked meat fiber, fat, sear, and marrow so those chunks still feel cooked, not flat brown ovals.
For interaction, I tried an eat / sneak-bite idea and dropped it. It fought the mood. Following aroma when you focus a dish felt truer, you smell comfort food before you taste it.
Proud of
- One feast composition, not three orphan icons
- Bangla-first UI for a regional comfort table
- Light, accessible focus (
aria-pressed, live status note) without heavy JS
License: MIT
Next: tighter mobile packing, maybe one more CSS-only prop motion.
Thanks for the challenge. Now go warm something on the stove.
Top comments (0)