
Build in Amsterdam
Foam Talent 2021
Scroll, stop, listen, watch, enjoy!
Foam Talent 2021
Scroll, stop, listen, watch, enjoy!
Best Mobile User Interface /
Webby Winner
We translated the physical experience of visiting a photography exhibition into emotional browsing.Karla Vincheva, Project Manager


Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?
A: To evoke emotion and suggest visitor presence, we designed two exploratory spaces with non-linear navigation, reminiscent of what it feels to wander around the Foam museum. The horizontal scroll imitates exhibition walls, while an open grid facilitates a fluid browsing experience and fluttering navigation pattern.
Q: What were some of your biggest learning and takeaways from this project?
A: We never cropped any artwork and made use of the whole width/height of the screen. Maintaining artistic integrity and capturing each artist's atmosphere and tone was challenging. With minimal intervention, we conveyed diverse ambiances and emotions through layout, color, animation, and captions. Some projects have an organic, collage-approach like Neuromantic, while others are following one sequential storyline like Extendable Ears.
Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?
A: We used our main BiA stack; Next.js and Vercel which offers an incredible synergy, performance and fluid setup for developers. We selected the Storyblok for its adaptable setup, quick modifications, variable components and live preview. It uses the input values directly from Figma inspect tool. The project also included complex & interpolated animations for which we chose a powerful animation library for React, Framer Motion.
Q: How did the final product meet or exceed your expectations? What results did you see?
A: An interesting setup is Thommy Kha's project page. It combines components of all sorts; images, videos, even draggable heads, but without doubt, one to highlight is the 3D cloth that we did with React Three Fiber (React renderer of Three.js ) to resemble his real artwork ‘Reunification’ (see folder for video).
Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?
A: Because of global lockdowns, more people than ever before were able to visit the Foam Talent exhibition which is usually a physical touring exhibition (London, NYC, Berlin, etc). Analytics showed that having a fully digital version enables a true worldwide reach. This aligns with our idea of making art more accessible on Foam.org that we also designed and developed. We enabled Foam team members to create their own online exhibitions in the CMS.