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 (1)
Well done! I love ramen 🍜