Music: Hania Rani The Boat (clicktap)

Music: Hania Rani The Boat

Preface

This is a 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.

00

AFM Molecule Images*

A major biotech client 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.

The Animation.

In addition to some 3D molecule render models, we experimented with a free animation based on a so-called shader script. This technique uses highly complex mathematical functions to draw individual pixels on the screen.

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.

The Colors.

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.)
Vibrancy
Rotation (drag)
Blue/Green
Timeline
Softness
Speed

The Backgrounds.

In order to be integrated into current workflows and to facilitate our customers’ decision-making, we have set up a series of microsites to test the background colors. To simplify things, some parameters were combined to achieve the best results with each of the corresponding corporate colors. Using a timer, our client was able to select section backgrounds with one click.

Timeline24.0s
Rotation69.2°
Softness100
0 s
TO BE CONTINUED…

Be the first to read the full article about this special technique for creating organic, smooth and animated gradients in web design.

Related Articles