165 design references

Ciao Energy · a rotating product can

Reel by Andrew Chornyy

Keep one can recognizable, and change the flavor and the promise around it, so each new claim still belongs to the same drink.

Visit website · Ciao Energy

What to look at

The browser is on ciaoenergy.com. A dark page holds a curved row of tall Ciao cans, the middle one larger, labeled Pomme Rhubarbe, with "Scroller pour découvrir" underneath. The row shifts. The center can becomes Abricot Framboise, then stands alone on magenta, tilted, with that flavor and one French sentence on the left. The same can turns until its back faces us. The left heading becomes Moins de sucre, then Arômes naturels, and for a moment that sentence is only a pink bar. A pink wash then puts Zero Bullshit behind a small front-facing can. The clip ends on a long gray arc of many colored cans and no flavor sentence. A white line stays: "This isn't just a banner."

Abricot Framboise stands alone on magenta, tilted, with the flavor name and one sentence on the left.
Abricot Framboise stands alone on magenta, tilted, with the flavor name and one sentence on the left.
The same can has turned to its back. The left heading is now Moins de sucre.
The same can has turned to its back. The left heading is now Moins de sucre.
A pink wash puts Zero Bullshit behind a small front-facing can. That slogan was not in the fetched page text.
A pink wash puts Zero Bullshit behind a small front-facing can. That slogan was not in the fetched page text.

Why it works

The can is the cue that keeps each new claim in the same place. Nielsen Norman Group says "Recognition is easier than recall because it involves more cues": the tall can and the Ciao word stay while the flavor name and the promise change, so a visitor does not have to rebuild the product. The turn is a state change. The same group says useful motion is unobtrusive, brief, and subtle, and that it helps when it shows the page moved from one state to another. Here the turn is how the back label arrives. Motion also pulls the eye. A spinning can and a full-screen color wash can take attention off the short French claim, which is already small, and on one frame that claim is only a pink bar. Andrew says they want people to remember the site, and that the designer did it perfectly. That is his say-so. The reel is not a memory test.

Try it

  1. Keep one can shape through the page, and change the flavor with a color plus one sentence beside it.
  2. Park the claim where it stays readable while the can turns, and do not let the turn cover it or fade it to a bar.
  3. If the visitor has asked for less motion, show the front of the can and the back label as two stills.
  4. Delete the placeholder flavor block, or replace it, so the first line a visitor meets is the real recipe.
  5. Treat "people will remember this" as a claim to test. After one visit, ask which flavor and which promise they can name.

What it costs

A spinning can and a color flood are decorative motion. web.dev explains that prefers-reduced-motion detects an operating-system request to cut animation, because effects such as parallax, zoom, and autoplay can bring on dizziness and nausea for some people. The words have a second problem. On the live page today the six flavors appear twice: the first block is still placeholder Latin for every flavor, and a later block has the real French lines, including the Abricot Framboise sentence from the reel. Anyone who stops on the first block reads filler.

Words worth knowing

Sources