Loading ...
Santos Enríquez, art director
Jaytel Provence, designer
Taua Baccarin/Sharon Cleary/Jonatan Maldonado, creative directors
John Gallegos, principal
Dino Spadavecchia, executive creative director
Harvey Marco, chief creative officer
Andrew Delbridge, chief strategy officer
Rebecca Peterhansen, strategy
Brenda Aguilar Schneider, product management group director
Christopher Calarco/José Pablo Rodríguez, executive directors
Silvina Cendra, executive strategy director
Kayla Jowski, project manager
CANVAS United/GALLEGOS United, project design and development
Comcast Xfinity, client

Launch Site

“A simple way to promote understanding is by listening to the voices and personal stories of others.” —Nathan Martin

“A beautiful example of how effectively a few minimal elements of sound, imagery and controls can convey a powerful message and make a connection.” —Aruna Mall

Overview: Created by digital design agency CANVAS United and ad agency GALLEGOS United, the Fabric of America is a living, breathing, interactive American flag made up of Latino voices that move the United States forward, visually representing how diverse voices make up the nation’s tapestry. By letting visitors add their own stories of strength, resilience and inspiration to the undulating flag, the website shows the beneficial contributions of the Latino American community to the United States.

  • The Fabric of America is a single-page application that runs on top of Vue.js. The site’s stack consists of JavaScript ES6, WebGL GLSL 100, NuxtJS, Tailwind-CSS and the Greensock Tween Library.

  • Visitors can navigate, pan and zoom around the 3-D flag, enabling intuitive navigation on all kinds of devices.

  • Having taken three months to complete, the site received positive media responses and many recorded stories.

Comments by Taua Baccarin, Christopher Calarco and Harvey Marco:
Was the project part of a larger promotional campaign? “The site is part of a campaign that celebrates the sentiment and spirit of echando pa’lante juntos, which translates to ‘moving forward’ together. On a deeper, more emotional level, the expression pa’lante encourages resilience and persistence in times of hardship. The Latino 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 to and contribute their stories of how they are moving the country ‘pa’lante.’”

Does the site have any special interactive features? “A signature feature is capturing the voices of visitors through their device’s microphone. Analyzing the recording’s frequencies, we were 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.”

Were there any extraordinary obstacles during development? “Two key features posed formidable challenges: the voice-recording feature and the waving 3-D flag. We wanted to realistically portray the motion of the flag, but we realized that the more movement added to the flag, the more difficult it was to navigate the site. We worked tirelessly, tweaking values to strike a balance between form and function where the flag felt dynamic while users could still interact with the diamond navigation points. For the recordings, our development team had to find cross-platform solutions to capture people’s voices on any device—and then visualize the recorded audio by mapping the frequencies of voices to data points, which would then influence the animated sound waves during recording. Keeping the sound wave animation within a desired range of motion required testing of a wide array of voice types to find a happy medium.”

X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In