Process:

There was lots of experimenting, getting the right blending of the brand colors, motion, and layout. I used many tools at this stage (Cavalry, C4D, After Effects, and TouchDesigner). Ultimately defining some clear art direction in the process.

”Our colors move in soothing oscillating way, grouped together as a single moving organism giving clear space for messaging. They function as ambient background, not taking the viewers attention away from the messaging. They don’t lean into 3D materials based on refections and light, that art direction will age poorly due to the rapid changes in 3D technology. Our colors are more in the 2.5D realm where there is depth similar to 3D but simplicity of a 2D gradients. They use of grain and blur techniques to give it extra depth and randomness adding to the dream like aesthetics that ties into our illustration style. This will give our brand gradients a unique position compared to other tech companies using gradients.”
- Me

Solution:

The project initially began in After Effects, but quickly revealed performance limitations when working with 4K resolution gradients. These performance issues significantly hindered the ability to fine-tune noise settings with precision, creating a frustrating bottleneck in the creative process. The breakthrough came after discovering Fabio Catapano's impressive gradient work in TouchDesigner. The switch to TouchDesigner proved transformative, offering real-time parameter adjustments and native 3D space manipulation that After Effects couldn't match. This platform shift not only solved the performance issues but opened up new creative possibilities, ultimately enabling the development of an interactive tool that designers could use independently. The transition from After Effects to TouchDesigner transformed the project from a potentially limited animation task into a dynamic, real-time design system that empowered other creators to generate their own on-brand gradients efficiently.

Execution: *nerd alert!

The technical approach leveraged TouchDesigner's capabilities to create dynamic brand-compliant gradients through a sophisticated yet intuitive process. The foundation began with a grayscale noise pattern programmed to oscillate over time. This grayscale range was then mapped to corresponding AWS brand colors, with specific values (such as pure white to 10% grey) correlating to designated brand color values. This color-mapped noise pattern was then applied as a material to a 3D plane, which was animated to move along the Z-axis, creating undulating wave effects. Multiple camera positions were established to capture various perspectives of this dynamic surface, resulting in diverse gradient animations. To make this tool accessible and useful for designers, the system was enhanced with an interactive interface featuring adjustable controls including sliders, a brand color picker, camera position selector, and a 3D visualization. The addition of a render button allowed designers to export their creations, effectively transforming a complex technical setup into a user-friendly tool for generating new on-brand gradient variations.