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.

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 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 our 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 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

Timeline7.3s

Rotation21.9°

Softness50

Gradient Timer (click or tap the circle)

Gradient Timer (tap the circle)

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.

Single Pixel Color

Scroll Observed

We were inspired by how the laws of physics have their aesthetic similarities at all scales.

AI Created Image

The Modules.

Finally, we packaged this into an asset that can be integrated into a website theme, giving our clients easy access to pre-built modules that combine color gradients and color parameters reminiscent of the aesthetics of mixed chemical liquids or laboratory equipment. We have given them meaningful names.

Liquids

Dark, monochrome, soft whisk texture on black with colored overlay options.

Parameters (ex.): Decay 0.15, Vibrancy 3.5, R 10.0 [var.], G 10.0 [var.], B 5.2 [var.], Soften 50, Zoom 5, Rotation/Timeline [inf.], Color Overlay [opt.], Fixed/Animatable [Position/Speed var.]

Bright

Soft, light two-tone colors without visible structure.

Parameters (ex.): Decay 0.095, Vibrancy 3.75, R 9.0 [var.], G 1.1 [var.], B 6.8 [var.], Soften 50, Zoom 5, Rotation/Timeline 3, Fixed/Animatable [Position/Speed var.]

Lights

Simple dark color with soft light line structures.

Parameters (ex.): Decay 0.1, Vibrancy 4.6, R 9.6 [var.], G 8.7 [var.], B 5.2 [var.], Soften 10, Zoom 5, Rotation/Timeline [inf.], Fixed/Animatable [Position/Speed var.]

Accents

Organic color gradient to dark or light with gently shaded secondary color.

Parameters (ex.): Decay 0.1, Vibrancy 4.6, R 9.6 [var.], G 8.7 [var.], B 5.2 [var.], Soften 70, Zoom 9, Rotation/Timeline [inf.], Fixed/Animatable [Position/Speed var.]

Bowls

Shell-shaped, softly structured overlaps on a predominantly dark background.

Parameters (ex.): Decay 0.15, Vibrancy 3.5, R 8.0 [var.], G 10.0 [var.], B 7.3 [var.], Soften 20 [var.], Zoom 5, Rotation/Timeline [inf.], Fixed/Animatable [Position/Speed var.]

Liquids

Dark, monochrome, soft whisk texture on black with colored overlay options.

Parameters (ex.): Decay 0.15, Vibrancy 3.5, R 10.0 [var.], G 10.0 [var.], B 5.2 [var.], Soften 50, Zoom 5, Rotation/Timeline [inf.], Color Overlay [opt.], Fixed/Animatable [Position/Speed var.]

Bright

Soft, light two-tone colors without visible structure.

Parameters (ex.): Decay 0.095, Vibrancy 3.75, R 9.0 [var.], G 1.1 [var.], B 6.8 [var.], Soften 50, Zoom 5, Rotation/Timeline 3, Fixed/Animatable [Position/Speed var.]

Lights

Simple dark color with soft light line structures.

Parameters (ex.): Decay 0.1, Vibrancy 4.6, R 9.6 [var.], G 8.7 [var.], B 5.2 [var.], Soften 10, Zoom 5, Rotation/Timeline [inf.], Fixed/Animatable [Position/Speed var.]

Accents

Organic color gradient to dark or light with gently shaded secondary color.

Parameters (ex.): Decay 0.1, Vibrancy 4.6, R 9.6 [var.], G 8.7 [var.], B 5.2 [var.], Soften 70, Zoom 9, Rotation/Timeline [inf.], Fixed/Animatable [Position/Speed var.]

Bowls

Shell-shaped, softly structured overlaps on a predominantly dark background.

Parameters (ex.): Decay 0.15, Vibrancy 3.5, R 8.0 [var.], G 10.0 [var.], B 7.3 [var.], Soften 20 [var.], Zoom 5, Rotation/Timeline [inf.], Fixed/Animatable [Position/Speed var.]

The Modules.

Finally, we have packaged this into an asset that can be seamlessly integrated into a website theme, giving our clients easy access to pre-built modules that combine color gradients and texture parameters reminiscent of the aesthetics of mixed chemical liquids or laboratory equipment. We have given them meaningful names.

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.

Contact us

Colors Archive | Elementi

Color Modules

Preface

The Animation.

The Colors.

The Colors.

The Gradients.

Parameters (ex.)

The Usability.

The Performance.

Single Pixel Color

Scroll Observed

We were inspired by how the laws of physics have their aesthetic similarities at all scales.

The Modules.

Liquids

Bright

Lights

Accents

Bowls

Liquids

Bright

Lights

Accents

Bowls

The Modules.

Interested in using powerful organic color gradients in your web project?

Related Articles

Colors Archive | Elementi

Color Modules

Preface

The Animation.

The Colors.

The Colors.

The Gradients.

Parameters (ex.)

The Usability.

The Performance.

Single Pixel Color

Scroll Observed

We were inspired by how the laws of physics have their aesthetic similarities at all scales.

The Modules.

Liquids

Bright

Lights

Accents

Bowls

Liquids

Bright

Lights

Accents

Bowls

The Modules.

Interested in using powerful organic color gradients in your web project?

Related Articles

Inside the Architecture

The Nanoparticles Story