This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art
🍲 The Bowl That Remembers — A 3D Interactive Comfort Food Journey
What I Built
Comfort food isn't just a meal—it's a memory. Whether it's a steaming bowl of Ramen that fogs your glasses, the Khichdi fed to you when you were sick, or a slow-simmered Phở finished with fresh herbs at the table, warm soups bring us back home.
The Bowl That Remembers is a pure CSS & SVG 3D interactive diorama celebrating global comfort soups (Ramen, Khichdi, Phở, Pozole, and Congee).
Key Features:
- 🎯 3D Perspective & Motion: Built in pure CSS 3D space using multi-layered
translateZdepth. - 🖱️ Drag-to-Tilt & Cursor Parallax: Seamless real-time camera manipulation using mouse drag and hover tracking.
- 📱 Mobile Gyroscope Support: Tilt your physical phone to look inside the bowl from different angles.
- 🎨 Procedural SVG Garnishes: All ingredients (eggs, scallions, chili oil, naruto) are rendered dynamically with linear and radial SVG gradients for realistic glossiness and light reflection.
- 💬 Interactive Storytelling: Tap/click the bowl to cycle through 5 global comfort dishes with custom notes and origins.
Demo
https://the-bowl-that-remembers.vercel.app/
Journey
When I saw the Comfort Food Edition prompt, I wanted to build something that went beyond a flat image. My goal was to push the boundaries of CSS Math (rotateX, rotateZ, perspective) and create an immersive, optical 3D experience without relying on heavy WebGL libraries like Three.js.
What I Learned & Challenges Overcome:
- Layering Z-Space in CSS: Managing individual depth layers for broth, ingredients, and rising steam paths so they align correctly when tilted at extreme angles.
-
Realistic Lighting & Gloss: Creating shiny broth surfaces and glossy food textures using layered SVG
<radialGradient>definitions and subtle CSS keyframe sheen animations. -
Cross-Device Motion: Combining mouse interaction for desktop with the
deviceorientationAPI for mobile devices to deliver a unified interactive experience.
License
MIT License
Top comments (7)
The gyroscope support is the detail that sells it. Tilting the bowl on a phone is what turns it from a picture into a diorama, and most CSS art submissions stop before that.
One thing I'd love to see in a follow-up: how you handled layer ordering at extreme angles. In my experience preserve-3d starts betraying you exactly there, and that's usually the part people struggle with the most. A short snippet of the broth/steam stacking would make this post as useful as the demo is beautiful.
Thanks a lot! Managing Z-fighting in preserve-3d was definitely the trickiest part.
I solved it by giving each garnish layer its own explicit translate3d() depth offset (e.g., broth at -4px, garnishes stacked between 7px to 17px, and steam at 70px). On top of that, counter-rotating the steam container (rotateX(-52deg)) keeps it floating properly above the rim regardless of the tilt angle. Glad you enjoyed the demo!
Well done! I love ramen 🍜
Thank you so much! Nothing beats a warm bowl of ramen—glad you enjoyed the 3D version! 🍜✨
Building a true 3D interactive diorama without resorting to WebGL or Three.js is impressive. The choice to pair multi-layered CSS translateZ depth with dynamic SVG gradients for the broth gloss and garnishes gives it such a tangible, tactile feel.
Bridging mouse tracking on desktop with the device-orientation API for physical phone tilting really elevates this from standard CSS art to an actual immersive UI experience. Managing depth layers and camera perspectives purely through CSS transform calculations takes a lot of patience. Awesome submission for the challenge!
Thank you so much for noticing all those technical details! Avoiding WebGL/Three.js was definitely the biggest personal constraint I set for this challenge. Getting the translateZ layers to play nicely with the SVG gradients and matching the camera perspectives across both mouse and gyroscope definitely tested my patience, but I'm thrilled to hear the tactile, immersive feel came through. Really appreciate the kind words! 🚀
Some comments may only be visible to logged-in visitors. Sign in to view all comments.