Work Labs Services FAQs Let's jam →
All work

Mangan AR Menu

Project Overview

Mangan All Day Dining is the restaurant at JHL Solitaire Gading Serpong, part of JHL Collections. The idea, from the agency IMAGINARIUM, was a menu that does more than list dishes. We built it as WebAR: guests scan a QR code at the table, the phone browser turns into a camera, and the menu comes to life on the table.

The Brief

  • Guests at a table, phone in hand. Nobody installs an app for one meal.
  • iPhone and Android alike, under warm restaurant lighting.
  • Video and 3D that still open quickly on the hotel’s Wi-Fi.

Our Scope

  • AR development: image tracking for the table cards, and room-scale placement for the 3D pieces.
  • The web app: landing page, scan view, dish picker, sound toggles and the honey info pages.
  • 3D pipeline: models compressed for the web, as GLB for Android and USDZ for iPhone.
  • Live keying of the dish videos, so the food sits on the card instead of in a box.

01The Experience

Three Ways to See the Menu

One link from the table, two kinds of AR. The cards bring dishes to life; the room pieces bring the stories behind them.

01 / 03

The Living Menu

Image tracking

Point the camera at a card on the table and the dish appears on top of it. Five cards, five sets: sushi, dimsum, roast duck, nasi campur and bubur manis. Each card holds several dishes, and a tap switches between them. Every dish has its own music, there when the guest wants it.

  • 5 table cards
  • Tap to switch dishes
  • Sound on request

No table nearby? Open the cards here and scan them off this screen with your phone.

The dimsum card: siomay, hakau, then bapau
Sushi card

Scan from this screen

  1. Scan the QR with your phone camera. The AR menu opens, no app needed.
  2. Allow the camera.
  3. Point the phone at the card on this screen. Tap to switch dishes.

On a phone already? Open this page on a laptop, or hold the card up to a second phone.

QR code: open The AR menu
02 / 03

The Honey Tree

Room-scale AR

A tree grows right on the table, with bees, honeycomb and nine labels of local honey hanging from its branches. Tap a label to read about that honey, from Java Gold to Black Forest.

  • 9 local honey varieties
  • Tap a label for its story
  • Placed on any flat surface
The honey tree on a restaurant table
03 / 03

The Ketupat Sayur Cart

Room-scale AR

A wooden street-food cart, the kind that sells ketupat sayur in the morning, set down beside the table with its own music. A small piece of Indonesian street food culture inside a hotel restaurant.

  • Music plays with the cart
  • GLB on Android, USDZ on iPhone
  • Compressed for mobile
The 3D cart, before it is placed in the room

02Under the Hood

Built for a Dinner Table

Guests give it one try, between ordering and eating. These details keep that try working.

  • Two kinds of AR, one link

    The table cards use image tracking. The tree and the cart use the table and floor: WebXR on Android, Quick Look on iPhone. The guest just taps.

  • Light enough for hotel Wi-Fi

    The 3D models are compressed, and the dish videos start loading while the camera opens, so the first scan doesn’t wait.

  • Food without the box

    Each dish video has a blue backdrop that the browser removes live, so only the food sits on the card.

  • Quiet until asked

    Music stays muted until the guest taps the sound button, so no phone surprises the next table.

03On Site

At the Table

Mangan All Day Dining, JHL Solitaire Gading Serpong. The cards that sit on each table, and the app tested in the restaurant.

The table cards: nasi campur, bubur manis, dimsum and sushi
The table cards: nasi campur, bubur manis, dimsum and sushi
Testing in the restaurant
Walking the room with the honey tree
The landing page: pick an experience
The landing page: pick an experience
Tap a label: the Java Gold page
Tap a label: the Java Gold page
Still live culinary.jhlcollections.com Open it on a phone. The honey tree and the cart work on any table.

04Our Work

Explore Others

More AR built to run in a browser.

JABOT’s AR Camera

  • WebAR / Exhibition
  • MindAR · Three.js
  • JAIF

PuriKura Photo Booth

  • Photo Booth / Exhibition
  • Electron · MediaPipe
  • JAIF
Explore all work

Let's Build The Engine

Bring the idea, or just the problem. We'll shape the experience and build the engine behind it.

Start Project Chat on WhatsApp