Color Modules

Stefan Seifert — Thu, 30 Jan 2025 07:11:45 +0000

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.

Der Beitrag Color Modules erschien zuerst auf Elementi.

The Nanoparticles Story

Stefan Seifert — Sun, 21 Apr 2019 09:00:38 +0000

The Nanoparticles Story.

Sometimes magic things happen when two artists meet. This was the case when I invited German photographer Uwe Reicherter to our studio in Hamburg. From the first moment on we had this silent agreement to not stop working until both of us would be fully satisfied with the result.

The idea was born to photograph nanoparticles in a way that it hasn’t been done before. Both of us were haunted by the idea to go beyond illustrative stock material or electronic microscope images. It should be artistic. It should capture the spirit of it. Make it happen to be visible for the people. And demonstrate what is their potential when used for cancer treatment.

Magazine Spread

The Light.

What intrigued us both the most certainly was the idea to use real light environments instead of constructing something artificially. So we needed something as a model. To experiment, to shoot series, to create atmosphere.

The Colors.

Particularly important seemed for both us the treatment of colors. Right from the beginning we tried to develop a homogeneous world of lights and shades. This was achieved only in part by image elaboration but mainly by setting real light environments and using filter techniques.

The Colors.

The Flexibility.

Once the first working templates were finished, it revealed how much incredible flexibility we gained. We combined different photographs to create new images in double exposure technique introducing also different levels of focus. This provides the possibility to demonstrate scientific and complex working methods.

Multiple Exposure Template

The Result.

As a result these photographs profit by a much wider variety and capability to be used in series. Once the model and lighting is fixed we can produce whatever perspective, detail or arrangement is needed. We enable our clients to feed their social networks in higher frequency and in a more unique way.

Real Photography

Real Light

Perspective Change

Production of Series

Real Photography

Real Light

Perspective Change

Production of Series

In the early stage of his career Uwe Reicherter has been collaborator of Roland Emmerich. He was invited to come to Hollywood for his enthusiasm and his scrupulous willingness to get the best out of each job.

Der Beitrag The Nanoparticles Story erschien zuerst auf Elementi.

Experimentation 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

The Nanoparticles Story

The Nanoparticles Story.

The Light.

The Colors.

The Colors.

The Flexibility.

The Result.

Real Photography

Real Light

Perspective Change

Production of Series

Real Photography

Real Light

Perspective Change

Production of Series

In the early stage of his career Uwe Reicherter has been collaborator of Roland Emmerich. He was invited to come to Hollywood for his enthusiasm and his scrupulous willingness to get the best out of each job.

Related Articles

Color Modules