Responses by Taua Baccarin, creative director, CANVAS United; Chris Calarco, managing director, CANVAS United; and Harvey Marco, chief creative officer, GALLEGOS United.

Background: The year 2020 marks a monumental pivot in America’s future. Together, we face some of the hardest challenges in our history. But this is also the year of the voice when we must be heard. The year when we must celebrate who we are, where we come from and where we want to go. Presented by XFINITY, “The Fabric of America” provides a digital platform for visitors to share their stories of strength, resilience and inspiration in their own voices, and bring awareness to the contributions that Latino Americans make to the benefit of our great country. Although the site was created for Latino voices, the experience is open to all who make up the diverse tapestry of the United States.

Larger picture: The site is part of a larger campaign that celebrates the sentiment and spirit of echando pa’lante juntos, which means “moving forward together.” On a deeper, more emotional level, the expression pa’lante is used to encourage resilience and persistence in one another, especially in times of hardship. The Hispanic mindset is hopeful, strong and positive, and has an undying will to better themselves and those they love. The website’s role in the campaign was to allow visitors to listen and tell their stories and contributions of how they are moving the country “pa’lante.”

Design core: The core feature of the site is a living, breathing, oscillating flag that enables users to navigate in a 3-D space. We wanted to create a truly immersive experience, so we encapsulate visitors with stunning visuals and sound as they navigate the flag. Once visitors begin their journey into the flag, they are greeted by an accompanying ambient soundscape and pleasant sights of particle plumes rising from the flag.

Another signature feature of the website is the use of the microphone to capture a visitor’s voice. Analyzing its unique frequencies, we are able to visualize a custom sound wave that becomes part of the digital flag. The final sound wave was designed to look like threads of fabric that make up a real flag.

Favorite details: We are so proud of the many contributors that added their voices and stories to the flag. We are thrilled with the depth, breadth and emotion that many of the stories entail. We want to say thank you to all that contributed.

Special navigational features: It was necessary to let site visitors navigate, pan and zoom into the 3-D flag in a number of ways so that they could experience and listen to the stories from any device, whether using a touchscreen, trackpad or mouse. We also added a “Listen to Stories” button at the bottom of the site to let visitors listen right away without having to navigate the flag. Finally, to enable an easy transition from one story to the next, we incorporated a next and previous button that virtually glides the visitor to the next story location on the flag.

Technology: The site is built in a standard static single-page application that runs on top of Vue.js at its core, with helper libraries added to expand upon its core functionalities. The app has a combination of both route-based and component-based architecture—which the framework provides—allowing for easy interfacing with the WebGL flag component. It also handles the communication between the CMS data and the flag and provides a layer of audio control.

The stack consists of JavaScript ES6, WebGL GLSL 100, Nuxt.js, Tailwind CSS, and Greensock’s TweenMax Library.