Ciao Energy

Item: Ciao Energy
Rating: 7.7

French low-sugar energy drink sold direct in several flavours.

ciaoenergy.com Save page

7.7/10MABTU rating

Home

DESKTOP · 1440 × 12,807/ ↗

MOBILE · 390

Section outline · Home

01heroFloating can cluster over magenta glow, centred wordmark nav
02featurePinned rotating can with ingredient claims fading in beside it
03featureSame pinned stage, icon list of sugar and caffeine claims
04productsFull flavour range fanned as a tilted arc of cans
05faqCentred accordion in bold italic display type1,557
06newsletterEmail field plus consent line on magenta
07footerSmall mono legal links under a last can render

Rating · Home

Visual design8.0

UX & clarity6.5

Originality8.0

Craft & consistency7.5

Motion8.0

Performance & a11y9.0

This page scores 7.7; the site score weights the home page double.

Main colours

Mixed sections·black background·vivid

Typography

Franklin Gothic Atfheading · sans · self-hosted Geistbody · sans · google Robotoaccent · sans · google

Stack & style

Webflow GSAP GSAP ScrollTrigger Lenis jQuery Three.js WebGL canvas

Bold typography Playful Gradient-heavy 3D Sticky header Transparent header Hamburger-only nav Hero carousel Pinned sections Text reveal FAQ accordion Smooth scroll

Also: Cloudflare

Design DNA

The whole page sits inside one hot magenta radial glow with soft smoke streaks, and every band is a pinned stage where a photoreal navy can rotates and re-lights while short French claims fade in beside it. Type is an ultra-bold condensed italic grotesk, set huge and partly cut off; an oversized outlined ZERO BULLSHIT wordmark runs behind the product as a watermark layer. Ingredient claims (stevia, natural flavours, coffee caffeine) are tiny mono captions with hairline rules. A flavour band fans the full can range in an arc, then a centred FAQ and a newsletter block close on the same pink.

Worth borrowing

Keep one saturated backdrop for the entire page and let only the pinned 3D product change between sections.
Run an oversized outlined slogan behind the product as a watermark so the background carries the brand voice.
Fan the full flavour range as a tilted arc of cans instead of a flat product grid.