Case study · Sito web · Energy drink
Ciao Energy
Sei gusti, una ricetta più pulita dei concorrenti e un pubblico che compra con gli occhi. Il sito doveva far venire voglia della lattina prima ancora di spiegarla.
- Cliente
- Ciao Energy
- Settore
- Bevandeenergy drink, Francia
- Tipo
- Sito vetrinauna pagina, sei gusti
- Cosa abbiamo fatto
- Design, 3D, sviluppodal concept al codice
- Tecnologie
- WebGL · GSAP · Lenis
Il punto di partenza
Un mercato pieno di lattine tutte uguali
Ciao Energy entra in un mercato dominato da due o tre marchi che conoscono tutti. La differenza sta nella ricetta: meno zucchero, aromi naturali, caffeina dai chicchi di caffè, stevia al posto dei dolcificanti sintetici. Cose vere, ma difficili da far pesare nei tre secondi di attenzione che un sito riceve.
In più, sei gusti da presentare senza che la pagina diventi un catalogo. E un solo obiettivo concreto in attesa del lancio: raccogliere le persone interessate.
01
Desiderio
Il prodotto deve piacere prima di essere capito. Chi arriva deve pensare «la voglio» nei primi secondi.
02
Chiarezza
Le scelte di ricetta raccontate una alla volta, senza tabelle nutrizionali e senza paroloni.
03
Contatto
Un'unica azione chiesta al visitatore: lasciare la mail per sapere quando arriva.
Cosa abbiamo costruito
Il prodotto al centro, tutto il resto intorno
Una sola pagina, letta dall'alto in basso. Ogni schermata dice una cosa e la fa vedere.
01
Sei lattine vere, non sei foto
Le lattine sono modelli 3D che ruotano nel browser. Si trascinano, si scorrono, si guardano da vicino. La luce cambia con il gusto: viola per il litchi, verde per kiwi e cetriolo, rosso per la mela.
Un rendering al posto di uno shooting fotografico: ogni nuovo gusto entra in scena cambiando una texture, non rifacendo il servizio.
02
Ogni gusto ha la sua scena
Scorrendo, la lattina scelta occupa lo schermo e due righe raccontano il gusto. Niente elenco puntato, niente scheda tecnica: il tono è quello di chi te la porge.
Lo scorrimento è morbido e guidato, così l'animazione resta agganciata al dito o alla rotella, mai in ritardo.
03
I benefici raccontati per confronto
Quattro schermate, quattro scelte di ricetta. Ognuna parte da quello che non c'è, barrato: 11 g di zuccheri, aromi artificiali, caffeina sintetica, aspartame. Poi arriva la scelta fatta.
Il confronto vale più di un aggettivo: «meno zucchero» si dimentica, «11 g» barrato no.
04
Le domande, prima che le facciano
C'è la taurina? Quanta caffeina? Chi può berla? Dove viene prodotta? Nove risposte brevi, nel punto in cui il dubbio nasce, subito prima del modulo di iscrizione.
Le FAQ sono la pagina di vendita che nessuno scrive volentieri, e quella che toglie più obiezioni.
Da telefono non è una versione ridotta: il 3D resta, le lattine si toccano, i testi si riordinano.
Come è fatto
Sotto il cofano: una scena 3D guidata dallo scroll
Sei effetti, uno alla volta. Ogni riquadro rievoca quello che succede sul sito.
- Webflow
- Three.js
- WebGL
- GSAP + ScrollTrigger
- SplitText
- Lenis
- Modelli GLB
- HDRI
can.glb × 6
Un modello, sei etichette
Un solo modello, sei lattine
Cosa vedi. Sei lattine uguali nella forma, diverse nell'etichetta e nel colore.
Come è fatto. Un unico modello can.glb clonato sei volte. L'etichetta di ogni gusto è un'immagine applicata a un materiale metallico con vernice e lucentezza. Un gusto nuovo è un'immagine in più, non un modello.
HDRI + tinta
--tint1: #6C3FD9--tint1: #2FB27A--tint1: #C9313D--tint1: #E58A2ELa luce cambia colore con il gusto
Cosa vedi. Con il litchi tutto vira al viola, con il kiwi al verde. Sfondo compreso.
Come è fatto. Una modifica allo shader moltiplica la luce riflessa per un colore di tinta. Lo stesso colore va in due variabili CSS (--tint1, --tint2) per il gradiente della pagina: un valore muove 3D e HTML insieme.
01 Gamma
02 Gusto
03 Benefici
timeline.progress = scroll
Lo scroll comanda la camera
Cosa vedi. Scorrendo, la lattina si avvicina, ruota e si mette in posa per ogni sezione.
Come è fatto. Ventotto parametri (camera, campo visivo, scala, luci) in un'unica timeline GSAP. Ogni sezione dura quanto è alta e la posizione dello scroll, gestita da Lenis, fa avanzare la timeline.
Raycaster
Le lattine si toccano
Cosa vedi. Clic su una lattina laterale e il carosello gira. Clic su quella centrale e vai al suo gusto.
Come è fatto. Un raggio parte dal puntatore (Raycaster) e trova la lattina colpita. La sua posizione decide: precedente, successiva o scorri alla sezione. Da telefono si trascina, con inerzia.
Cinema sul desktop, leggerezza sul telefono
Cosa vedi. Su desktop la lattina ha un alone di luce e bordi puliti. Su telefono è la stessa scena, ma fluida.
Come è fatto. Un profilo dispositivo decide all'avvio: su iOS e sotto i 1024 px niente bloom né antialias, materiali più leggeri, 8 bit. Se iOS toglie il contesto WebGL, il rendering riparte da solo.
0%
L’energy drinkparfaite.
Un loader che carica davvero
Cosa vedi. Un contatore da 0 a 100%, poi la camera arriva da lontano e il titolo entra per righe.
Come è fatto. Il contatore avanza da solo finché modelli e texture non sono pronti, poi si allinea al progresso reale. A scena pronta una timeline porta la camera in posizione e SplitText rivela i titoli riga per riga.
Cosa puoi portare nel tuo sito
Cinque cose che valgono anche senza lattine
Non serve un prodotto in 3D. Servono decisioni chiare. Queste sono quelle che hanno fatto la differenza qui.
01
Mostra il prodotto, non descriverlo
Una lattina grande e ben illuminata convince più di tre paragrafi. Se non hai il 3D, una foto pulita a tutto schermo fa metà del lavoro.
02
Una promessa per schermata
Ogni sezione di Ciao Energy dice una cosa sola. Se nel tuo sito una schermata dice sei cose, il visitatore ne ricorda zero.
03
Il confronto batte l'aggettivo
«Più sano» non si vede. «11 g di zuccheri» barrato sì. Trova il numero o la cosa concreta che fai diversamente e mettila in mostra.
04
Rispondi prima che chiedano
Le obiezioni che senti dai clienti a voce sono le FAQ del sito. Scrivile con le loro parole e mettile prima del modulo, non in fondo.
05
Chiedi una cosa sola
Ciao Energy chiede la mail e basta. Niente «seguici», «scarica», «prenota» tutti insieme. Decidi qual è l'azione che conta per te e costruisci la pagina perché porti lì.
Il prossimo potrebbe essere il tuo
Vuoi un sito che faccia questo effetto?
Non serve un energy drink. Serve un prodotto in cui credi e la voglia di mostrarlo come merita. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti