Minnesota United Football Club had a new kit design for the 2024 season and they wanted a way to reveal it to the public that was fun, interactive, and cutting-edge. In partnership with REM5 Studios, I helped bring their kit to life with a custom WebAR app and awesome code-based special effects.
This app was built using 8th Wall and leveraged its world tracking capability to make it seem like the kit was right there in the room with you. A mix of Three.js, A-Frame, and vanilla JS was used for 3D rendering and app flow management, with some custom special effects built with shaders and a GPGPU-based particle system. Various UI controls and overlays throughout the app were built with HTML, CSS, and vanilla JS.
Kit reveal effect
The most important moment in the app is when the new kit design is revealed to the user, so it had to be special. A photorealistic 3D model of the kit, made by artist Keenan Geib, is progressively revealed from the bottom up by a custom shader that mixes a noise function with the model’s color map.
—LARGE VIDEO CAPTURE OF KIT REVEAL EFFECT—
Real-time kit customization
After the kit is revealed, the user is given an opportunity to see their name and number on the back using an interactive, real-time editor. As the user types, their text is drawn directly onto the kit model’s color map with the brand font while a profanity filter makes sure they haven’t typed anything objectionable.
—LARGE VIDEO CAPTURE OF KIT CUSTOMIZATION—
Easter eggs!
For a bit of extra fun, if the user enters a secret passcode into the name field they can trigger a special green-screen video of a star player showing off the kit (with some sweet glitch effects made by Brian Skalak).
—LARGE VIDEO OF EASTER EGG–
Particle effects
To create a bit of hype before the kit is revealed, a custom particle system was created to swirl around the space, shrinking and exploding into different configurations.
