The problem
Social content can make a restaurant memorable while leaving its menu, story, location, and visit details scattered. The brand needed one owned place where personality and practical information could work together.
01 · Overview
A loud ramen brand needed a home of its own.
Bambam Diner is an independent concept for a ramen shop in San Marcelino, Zambales. The study explores how a brand built around rich, slow-boiled bowls and playful energy could move beyond social posts into a complete website.
- Type
- Concept study
- Industry
- Restaurant
- Scope
- Strategy, UX, 3D, front-end
- Year
- 2026
The objective
Translate Bambam's bold, cartoon-like character into a digital experience without letting the motion compete with the menu or the basic restaurant journey.
The response
- Open with ritual. A noren curtain makes arrival part of the brand story before revealing the site.
- Build the bowl in motion. The scroll-driven 3D sequence turns broth, noodles, and toppings into a product story.
- Keep the meal findable. The menu and supporting pages stay structurally simple beneath the visual theatre.
05 · Experience
drag / swipe · ← →
Hero: scroll-driven 3D ramen bowl01
Noren curtain reveal02
Menu page03
Floating music player04
Mobile view05
01 / 05
06 · Design decisions
Copy
#FBF0DACream base
Copy
#D6203AAka red
Copy
#F7C233Logo gold
Copy
#2B1C14Ink outline
Copy
#FBE6A6Menu wash
Type: Lilita One (headings) · Baloo 2 (body/UI) · Gameria (wordmark)
07 · Build
Interface
Noren curtain reveal
Floating music player
Multi-page architecture
3D & motion
Three.js ramen bowl, scroll-driven
Falling sakura petals
Stack
Vanilla HTML/CSS/JS
Three.js
Web Audio API
Vercel
08 · Concept outcome
Playful on the surface. Direct underneath.
The finished concept shows how a restaurant can carry a strong visual personality while keeping the essential journey recognizable. It demonstrates Arc's approach through the brand translation, interaction model, and working front-end.
For restaurant owners