This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
For me, comfort food is closely tied to a South Indian breakfast at home.
I am currently in Canada, and this piece came from missing India and the small everyday things that feel familiar when you are away from home.
Idli, sambar, coconut chutney, a banana leaf and filter coffee are all part of that memory for me. They are simple, everyday things, but together they carry a lot of warmth, routine and comfort.
That is what I wanted to capture with Morning on a Banana Leaf.
I did not want the final piece to feel like a landing page or a UI concept. I wanted it to feel more like a still life, with the food, materials and atmosphere doing most of the talking.
The first version was actually an interactive tiffin box that opened to reveal the meal. It worked, but I realised I was spending more time on the lid, handle and mechanics than on the food itself.
So I changed direction and focused on the breakfast.
Demo
If the embed does not load, you can view the project on CodePen.
Journey
The final composition is built around a banana leaf with three idlis, sambar and coconut chutney.
I also added a stainless steel spoon, a davara tumbler of filter coffee, a partially cropped side plate, steam and warm morning light to give the scene more depth and make it feel recognisably South Indian.
Everything in the scene is drawn in the browser.
There are no photographs, SVG illustrations or canvas elements.
The banana leaf is built from layered gradients, shadows, a midrib and individual veins. The idlis use small radial gradients to create surface pores and keep them from looking like plain white circles.
The steel bowls, spoon, davara and tumbler were probably the hardest parts to get right. Simple grey gradients looked flat, while stronger highlights quickly started to look like chrome. I ended up layering darker edges, softer reflections, inset shadows and warmer tones from the surrounding scene.
The sambar includes small oil marks, curry leaves and a chilli. The chutney has mustard seeds and tempering details. I also added coffee foam, wood grain and a few small imperfections around the scene so it would not feel too clean or mechanical.
The animation is intentionally restrained. The different parts of the breakfast arrive in stages, then the scene settles and the steam becomes the main continuous movement.
There is also a small desktop pointer effect. JavaScript only updates two CSS custom properties based on pointer position, while CSS handles the actual perspective transform.
For accessibility, the artwork is wrapped in a figure with a descriptive label, decorative elements are hidden from assistive technology, and prefers-reduced-motion disables the entrance animations and pointer movement.
The biggest thing I learned while making this was that adding more CSS does not automatically make CSS art better.
The project improved the most when I started removing things and paying more attention to composition, overlap, light, material and cultural context.
The final version is very different from where I started, but it is much closer to what I wanted to make:
A small piece of home, remembered through the browser.
Thanks for viewing Morning on a Banana Leaf.
