This Restaurant Site Builds Your Bowl as You Scroll

Amba Mediterranean Grill is a Lebanese grill on Route 59 in Joliet, Illinois. Four brothers run it, and they cook from the recipes they grew up with. Their food photos are great. Their website does not move.

Background: the checks every business site needs.

So we built a concept of what their site could feel like. You can try it here. It works best if you scroll slowly.

What Happens When You Scroll

The page opens on an empty white bowl. Then the top of the page holds still while you scroll, and the bowl fills up one ingredient at a time:

• Saffron rice drops in first, then the spinach.
• The steak lands in the middle.
• Red pepper hummus, chickpeas, carrots, pickled turnips and pickles follow.
• A squeeze bottle of garlic sauce tips over the bowl and draws four lines across the top.

Each piece falls in from above and lands in its spot, and the bowl gives a little bump each time. When the last line of sauce is down, the page lets go and you keep scrolling.

Further down, a second bowl builds itself the same way while four steps light up: pick a base, add a protein, load the toppings, sauce it. That one is their chicken bowl.

Real Food, Cut Apart With AI

We did not make up any food. Every ingredient you see came out of one real photo from Amba's own site.

Here is how that worked:

1. An AI photo editor removed the sauce lines from their steak bowl photo, and kept everything else in place.
2. A second AI tool found each ingredient in that photo, like the steak, the carrots and the chickpeas, and cut it out on its own layer.
3. We painted the inside of the bowl clean, so the page could start with it empty.

Because every layer came from the same photo, the bowl at the end looks exactly like their real food. The AI part cost well under a dollar.

The page also uses the brothers' own photo of the four of them outside the restaurant, next to their story.

Built to Be Fast

A page with this much motion can easily get slow. We made sure this one did not:

• The top of the page draws before any animation code loads, so nobody stares at a blank screen.
• The fonts only carry the letters the page uses. That cut them from 170 KB to 66 KB.
• The second bowl does not load until you scroll near it.
• People who turn on reduced motion get the finished bowl as a still photo.

When we tested the live page with Google's Lighthouse tool on October 10, it scored 100 for speed on desktop and in the low 90s on mobile.

This Is a Concept

To be clear, this is not Amba's official website. That is ambagrill.com, and that is where you order from them. This is our idea of what a restaurant site can do when the food is the star.

If you run a restaurant and want your menu to move like this, tell us about it. If you see something we could do better, we want to hear that too.

Common Questions

Is this the official Amba website?

No. It is a redesign concept built by T3CHS. The official site is ambagrill.com.

Were the food photos made with AI?

No. The food comes from Amba's own photo. AI only removed the sauce and cut out each ingredient.

How much did the AI part cost?

Well under a dollar. That covered the photo edits and the cutouts for each ingredient.

Is a page with this much motion slow?

Not this one. It scored 100 on desktop and in the low 90s on mobile in Lighthouse.

What happens if a visitor turns off motion?

People who ask their phone or computer for less motion see the finished bowl as a still photo.