Music: Hania Rani The Boat (clicktap)
Music: Hania Rani The Boat
Preface
This is a brief story about processes. What starts with a task turns into an idea and, in rare cases, is struck by an inspiration. Eventually, creations like these evolve and turn into something unexpected, almost by themselves.
AFM Molecule Images*
A major biotech player recently asked us to create an animated key visual to support the market launch of their newly acquired manufacturer of chemical intermediates for drug development and perfume production.
*https://physics.aps.org/articles/v12/53
The Animation.
To visualize the molecules, we used 3D render models before experimenting with an animation based on a so-called shader script. This technique uses highly complex mathematical functions to draw individual pixels on the screen instead.
This technology is GPU-optimized for the browser, so that it runs extremely smoothly even with slower Internet connections and can be easily and very flexibly integrated into websites or any type of online presentation.
Impressed by the results, the board quickly decided to involve us in the ongoing and somewhat painful process of redefining the parent company’s corporate design, especially when it came to redesigning their corporate colors.
After a series of mostly frustrating attempts to make their corporate colors more expressive with gradients, they were thrilled with the color brilliance and depth of the Molecules animation, especially on dark backgrounds.
The Gradients.
So it was an obvious idea to take a “closer look” at how this animation technology could be used to help them creating vibrant and organic colors, shading, variations for website sections, presentation titles and much more.
We extended the parameter set of the original animation with CSS-controlled values to enable fine-grained control of the position of the color gradients, the color composition, the softness and, last but not least, to allow color overlays.
Parameters (ex.)
The Usability.
In order to be integrated into ongoing workflows and to facilitate our customers’ decision-making, we have set up a series of microsites to test the backgrounds. To simplify things, some parameters were combined to achieve the best results for the corresponding corporate colors. Using a timer, our client was able to select section backgrounds with one click.
Timeline7.3s
Rotation21.9°
Softness50
0 /10s
The Performance.
The results were amazing. Because we were able to use the browser’s native GLSL technology, where each pixel is defined programmatically, the gradients were incredibly smooth, freeing our client from frustrating compression trade-offs. To keep performance even more under control, we ensured that the gradients, especially when animated, only became active when scrolled into view.
We were inspired by how the laws of physics have their aesthetic similarities at all scales.
Interested in using powerful organic color gradients in your web project?
Contact us or simply leave a comment below and we will get back to you.
Related Articles
0Comments