Bibi Projection Mapping Cafe
The first time I encountered projection mapping was when I visited the Shanghai World Expo in 2010. I remember visiting the Dream Cube, an interactive exhibit featuring windmills and rolling hills that responded to visitors’ movements. Waving your hand in front of it would cause reactive screen effects, and the impression was obviously so strong that I still think about it 14 years later!
The second time I experienced projection paired with interaction was at TeamLab Borderless in Tokyo. All of the exhibits were just so beautiful and it was such a fun experience walking through them! I highly recommend everyone to visit. So when I started seeing people online build DIY projection mapping setups at home, I also wanted to try myself since I have a projector! My friends were coming to visit around the same time, so we ended up making it one of the activities we would do together. We decided to create a themed projection-mapping café experience in my apartment, projecting different visuals onto the table as participants ate. The goal was to bring storytelling, technology, and food together into one immersive experience!
→ Determining the story
As we were developing this concept, we wanted to showcase something meaningful, and what better way to do this than to tell a story? That’s how our original character, Bibi, was created. Inspired by soft, pastel Sanrio-style characters, Bibi is a sea slug (one of my favorite aquatic creatures) who is happy-go-lucky, carefree, and tries to live every day to its fullest. Bibi has long, ear-like appendages, similar to those of floppy-eared dogs, that trail behind when they move. This design choice reflects Bibi’s personality, as Bibi is the type to be determined when curious but laid-back otherwise!
The story we ended up telling was called Bibi Wants to Remember Yesterday. The core message was simple: enjoy today! Bibi wakes up from a wonderful dream and tries to remember it, but can’t. So Bibi recruits their friends, Nana (a cat) and Andre (a bear anglerfish) to help search for it. Nana suggests asking an elderly dragon who knows everything. However, when Bibi finally finds the elderly dragon, he asks why Bibi is so intent on remembering the past instead of appreciating the present moment.
→ Menu Design/Recipe Testing
Once we had the story mostly written, we started deciding what we wanted our menu to be as well as a recipe test the week before our event day. This process was super fun to me as we had to creatively think about how to cook unique foods that related to the story. One of my favorite dishes that we created was inspired by a beach scene in the story: korean prinkle chicken coated in white cheddar powder to resemble sand, paired with blue rice paper that we soaked and fried to create ocean waves! Another fun dish was the final course: a Bibi-shaped crêpe. We practiced creating and ate so many crepes the week prior but even in the end, they still didn't look that great haha. It has it's own charm though!
→ Creating the Illustrations and Projected Animations
A huge part of the project was illustration-based. Every element, from the characters to the food and menu, was drawn in a cohesive style that matched the story. Because the story focuses on dreams, and has a lighthearted tone, we mainly used a light color palette, simple linework, and solid colors without shading. The drawings were made in Procreate, and then we imported them into After Effects for the animation portion.
Oh man, the After Effects learning curve was pretty steep! We definitely struggled to create cool motion graphics within the short time frame we had.
Besides having the café participants watch the animated scenes that conveyed the key story points, we also wanted a transition scene that could play while they were eating and conversing. It was important that this scene was visually interesting and had plenty of movement, but was still casual enough to enjoy throughout the meal.
What we came up with was a idle scene featuring fish and manta rays swimming across the table alongside animated water ripples. We primarily used After Effects’ Puppet Pin tool to deform and animate the sea creatures’ bodies. Here’s the tutorial we followed. For the water ripples, we animated the size and opacity of circular shapes to create the appearance of expanding ripples.
Once we had all of our animated videos prepared, we imported them into PowerPoint to use as our scene-switching solution. This allowed us to play the animations in full screen and quickly switch between different projection scenes during the experience. It also helped us avoid the default video player controls that would appear during playback and break the immersion.
While testing the projected scenes, we realized that the story we had conceptualized wasn't being communicated as clearly as we had hoped. Our animations were relatively simple, and we couldn't easily incorporate text into the projections because it would be difficult to read. To address this, we decided to create story cards that would be presented alongside each meal and help convey the narrative. Thankfully, we were able to reuse most of the assets from our videos and design the cards in Figma!
→ Setting Up the Projection Mapping Space
One of the more difficult challenges was getting the projector aligned correctly so that the projection mapped onto the table. Many projection mapping setups I've seen use ceiling-mounted projectors, but mine was a standalone projector that wasn't designed for that type of installation. Since we needed to project downward from a high enough point, I ended up buying a 5-foot tall tripod to mount the projector on and angle it toward the table.
To align the projection, we first used the projector's default settings to adjust the view to match the bounds of the table. We then placed markers on my floor to remember the tripod position. During the 3 days leading up to the event, we tried our best not to bump or move it since even a small shift could throw off the alignment and require us to recalibrate the projection again.
The table itself presented another challenge: the one I owned was light brown and not white. In a dark room, our projections showed up clearly, but our event was scheduled for late lunch, when sunlight would shine brightly into my apartment. This made the projections less visible than we had hoped. To reduce this problem, we tried placing parchment paper over the table to create a lighter projection surface. It was slightly better but not much.
Since we were hosting the café experience in my apartment, we also had to get creative about separating the café from my everyday living space. I placed the table in the furthest corner of the room to give the experience its own dedicated area. I also put up large dividers around my kitchen counter to conceal the cooking area, since I felt that seeing us cooking and chatting in the background would break the immersion. These small adjustments helped make the café feel like its own little world, separate from the rest of the apartment.
We tried our best to create an underwater-themed atmosphere using objects I already had. Closing all the blinds and adding a blue lamp and fairy lights definitely made the space feel more like being underwater. Playing underwater-inspired music also helped set the mood! The invasive tripod beams next to the table were also decorated with blue plastic flowers and the surrounding area had different ocean related trinkets around.
→ Conclusion
Finally when the Saturday of the event came around, I felt unexpectedly nervous. Up until that point, the project existed in thought and I wasn’t sure how it would translate with actual "customers". Early in the morning we had to do a lot of prep work regarding the dishes this way we could quickly assemble and serve when our customers sat down. I invited two of my coworkers to experience it, and as soon as they arrived, it was time! The overall experience was structured with me playing the waiter role and guiding them through the experience, while my friends were in charge of cooking and managing the media experience. First, I would introduce each dish as well as place the printed out story cards for them to read at their own pace. Then either the food or projection would be presented. It was surprising how many steps I took in my small apartment as I kept going back and forth from my kitchen to the table (I think I got in like 3k steps??).
It was a success!!
That said, this project taught me how intense running a café would actually be. The logistics alone, timing dishes, serving, cleaning were tiring. The night before the event, we stayed up until 1 a.m. finishing preparations, and when the event was finally over, the sense of relief was very real. Nonetheless, it was rewarding to see my coworkers experience something new and to finally bring an idea I’d been holding onto into reality.
Emotionally, Bibi represents a kind of freedom I’ve been thinking about a lot. And that's the ability to care deeply and try wholeheartedly without letting the outcome define the experience. It’s easy to get caught up in results or to chase something until it becomes overwhelming. But as I slowly mature, I’m learning to value the act of trying itself, and to let that be enough.
Overall, this project reminded me how much I love designing experiences for others. Even if it was a small-scale experience, being able to experiment, cook creatively, build immersive spaces, and write about the experience now is so fun. Bibi is proof that I can turn my own ideas and curiosity into something tangible!
I think about the World Expo a lot when I reflect on this project. That experience only existed for a short time, and I was nine years old when I saw it, but I still remember how impressed I felt interacting with those projections. Sixteen years later, I don’t remember the exact details of the pavilion, but I remember how it made me feel curious, and excited that a display could respond to me.
Meaningful experiences don’t need to last forever and both the Expo and this café were both temporary by design. When the projector turned off, the food was eaten, the space returned to normal, and nothing remains except the memory. Even though it required a lot of work for something that disappeared almost immediately, I got a happy memory with friends and expressing my ideas out of it! That's what life is about!
