A lot of time and energy went into founding Pink Yellow last year, and the idea of a personal piece to kick things off had been floating around for a while. Our next production together would be a technical showcase, as well as a light-hearted love letter to an industry we have been a part of for so many years.
Out of various fun analogies symbolizing the wait before we’d ultimately set sail as Pink Yellow, the final minute ticking away on a microwave display had us laughing the most. We developed every aspect of MicroWaver 59™, from the pace of the music to the smallest interactions, around this feeling we are all so familiar with: eagerly waiting for dinner time.
Digital vintage
Starting off with real-world dimensions and weight, we’ve taken a very physical approach to the design of this virtual food machine.
In collaboration with the talented Thaís Yumiko, we worked through 16 iterations of the 3D model and landed somewhere between a vintage television set and a moon lander. The clunky, yet friendly aesthetic of the final product perfectly embodies what we believe it feels like to interact with a futuristic kitchen appliance from the past.
The clunky, yet friendly aesthetic of the final product perfectly embodies what we believe it feels like to interact with a futuristic kitchen appliance from the past.
But it’s not just looks, is it? Weeks of careful animation and physics simulation are what made the experience come to life. The fun, awkward character of MicroWaver 59™ truly shows in the way it moves and responds to you.
If you look closely, you’ll notice that not just the microwave, but the entire space reacts. Subtle camera movement, screen shake, and various visual effects are used to pull users into the environment and add weight to their interactions.
Almost as important as the microwave itself, is the way we imagine it would be marketed. Taking the form of a TV commercial from the ‘50s, we see the brand-new MicroWaver 59™ dance around in all its burning glory. This short 3D animation, narrated by an AI voice named Julie, really drives home the point that this product is just what you need.
To top it all off, we wrote a theme song and visited our friends at Mantis Audio for music production.
Fifty-nine seconds of delicious, electromagnetic horsepower
We make sure that every component we build, big or small, is an experience in and of itself. It’s the details that carry a story and the sheer number of moving parts in MicroWaver 59™ brought about some interesting challenges.
Perfecting how, when, and in which order pixels are manipulated turns out to be essential.
We’re capturing and rendering the world inside and outside the microwave simultaneously. On top of that, the experience is filled to the brim with custom effects and post-processing layers.
Aiming for this level of visual finesse in a web browser can be a delicate process. Perfecting how, when, and in which order pixels are manipulated turns out to be essential, and we are pleasantly surprised by what we were able to squeeze out of even mobile devices and older GPUs.
Technologies
The models used in MicroWaver 59™ are constructed in Blender and exported using the DRACO compression library.
On top of our custom JavaScript framework and build tools, we utilize ThreeJS and custom WebGL shaders for rendering graphics and post-processing, as well as GSAP for animation.
For ease of use—and peace of mind—we host a high availability setup at Vercel. A Laravel API is responsible for keeping track of user scores and leaderboards.
Hungry for the future?
In recent years, websites and platforms have focused on optimization, conversion, and marketing almost exclusively. With MicroWaver 59™, we invite brands to reconsider their online presence and turn digital experiences into physical ones; to stir emotion and create a real connection with their users.
We invite brands to reconsider their online presence and turn digital experiences into physical ones.
It’s easier than ever for us to reach one another, and we believe there’s ample opportunity for positive impact. If we put a smile on someone’s face or have them hum a melody, we believe we are successful.
About Pink Yellow
Welcome aboard our full-service development workhorse: Pink Yellow. We are a small team of seasoned creators; ready to take on that crazy project everyone talks about, or simply build you a rock-solid website.