Case study · Sito web · Sport e motori
Formula Project
Il sito di un pilota è un sito di tifosi: deve dare emozione, non informazione. Qui tutto gira intorno al casco: appare sotto il mouse nell'apertura, riempie la galleria dei caschi stagione per stagione, chiude il piede. In mezzo, foto grandi, un manifesto e i social.
- Progetto
- Formula Projectbrand concept
- Settore
- Sport e motoriil sito personale di un pilota
- Tipo
- Sito webhome, in pista, fuori pista, calendario
- Cosa abbiamo fatto
- Design, sviluppo, motion, 3Ddal sistema visivo al codice
- Tecnologie
- Webflow, GSAP, Three.js, Rive, Lenisvideo in streaming
Il punto di partenza
Un sito che deve far sentire il tifoso vicino
Un pilota ha già i social, la squadra, gli sponsor. Il suo sito serve a una cosa: essere il posto dove un tifoso sente di stargli più vicino che altrove. Quindi niente biografia in colonna: il ritratto a tutto schermo, il casco che si scopre passando il mouse, le foto dai box e le frasi dette con la sua voce.
La struttura è semplice: in pista e fuori pista, la galleria dei caschi, il negozio, i partner, i social. Ma ogni passaggio ha un movimento suo: una corsa orizzontale di foto, parole evidenziate in lime, un ventaglio di card, animazioni Rive nei bottoni, nel menu e nel caricamento.
01
Il casco come firma
Il casco 3D nell'apertura, la galleria stagione per stagione, il piede: chi esce dal sito si ricorda un oggetto.
02
Emozione prima dei dati
Ritratto, foto grandi, una frase per volta. I risultati e le statistiche stanno nella pagina in pista, non in home.
03
Portare al negozio e ai social
La collezione del titolo mondiale e i sette social in un ventaglio: due chiamate, una per comprare e una per seguire.
Cosa abbiamo costruito
Il casco, la pista, i tifosi
Una home lunga in dieci scene, più le pagine in pista, fuori pista e il calendario. Le pagine si passano il testimone con una transizione Rive.
01
Il casco che segue il mouse
Il ritratto a tutto schermo, e sopra la testa un casco trasparente. Dove passa il mouse, il casco diventa vero: la visiera, la livrea, gli sponsor. Ti muovi e lo scopri un pezzo alla volta.
Sul telefono si tocca per bloccare e si trascina con il dito. A sinistra, la card della prossima gara.
02
Il manifesto evidenziato
Su fondo verde scuro, sei righe a caratteri grandi: ridefinire i limiti, lottare per le vittorie, costruire un'eredità. Le parole che contano ricevono un evidenziatore lime che entra da destra mentre scorri.
Prima, una sezione buia con un messaggio in video e la firma.
03
La corsa orizzontale delle foto
Scorri in verticale e la pagina si muove di lato: un nastro di foto con luogo e anno, e tre frasi in corsivo. Il fondo cambia colore lungo il percorso, dal verde scuro al grigio al panna.
Poi la scena divisa in due: in pista e fuori pista, con il casco da una parte e il ritratto dall'altra.
04
La galleria dei caschi
«Helmets, hall of fame»: sedici caschi dal 2019 a oggi in una griglia con le cornici a filo. Al passaggio del mouse la cornice si apre e compare la foto del casco in pista.
Sotto, il negozio con la collezione del titolo mondiale.
05
I partner e il ventaglio dei social
I partner con una scritta «Collabs» a mano in lime e i loghi che scorrono. Poi «What's up on socials»: sette card con i post che si aprono a ventaglio quando entrano nello schermo.
Chiude il piede: la firma, «always bringing the fight», il casco e un bagliore lime in alto.
Come è fatto
Sotto il cofano: un casco, una pista e le macchine a stati
Sei meccanismi, uno alla volta. Dal casco 3D alle animazioni Rive.
- Webflow
- GSAP
- ScrollTrigger
- Three.js
- Rive
- Lenis
- Cloudflare Stream
il casco si vede solo dove passa il mouse
Il casco 3D che si rivela sotto il cursore
Cosa vedi. Sopra il ritratto c'è un casco trasparente. Dove passa il mouse diventa colorato: visiera, livrea, sponsor. Sul telefono tocchi per bloccare e trascini.
Come è fatto. Il casco è un modello 3D renderizzato con Three.js su un canvas sopra la foto. Il puntatore diventa una luce, o meglio una maschera: il materiale è visibile solo entro un raggio dal cursore, con i bordi sfumati. Sul touch la maschera segue il dito dopo un tocco che blocca lo scroll, e un altro tocco lo libera.
It doesn't matter where you start, it's how you progress.
Since I was 7 years old, I've worked to make that dream come true.
scroll verticale → corsa orizzontale · il fondo cambia
Lo scroll verticale che diventa corsa orizzontale
Cosa vedi. Arrivi alla sezione e la pagina si blocca: continuando a scorrere, le foto corrono di lato e il fondo cambia colore.
Come è fatto. La sezione è alta più di tre schermate ed è fissata con ScrollTrigger; il progresso dello scroll diventa una traslazione orizzontale del nastro. Il colore del fondo è interpolato sullo stesso progresso, così cambia in modo continuo. Le foto più piccole hanno una velocità leggermente diversa.
hover: la cornice si apre e compare la foto in pista
La griglia dei caschi che si apre al passaggio
Cosa vedi. Sedici celle con un casco ciascuna. Passi sopra una: la cornice si allarga oltre la cella e compare la foto del casco in pista.
Come è fatto. Ogni cella ha due immagini sovrapposte, il casco e la foto, e una cornice disegnata in SVG che al passaggio si estende con delle prolunghe agli angoli. La foto passa da trasparente a visibile con una leggera scala; la cella si porta sopra le vicine.
Redefining limits, fighting for wins, bringing it all in all ways. Defining a legacy in Formula 1 on and off the track.
le parole compaiono, il lime entra da destra
Le parole che si accendono in lime
Cosa vedi. Il manifesto compare parola per parola mentre scorri, e le parole chiave ricevono un evidenziatore lime che entra da destra.
Come è fatto. Il testo è diviso in parole; ognuna passa dal 15% al 100% di opacità in ordine, legata allo scroll. Le parole marcate hanno un attributo che dice direzione e colore: un gradiente di sfondo a dimensione zero cresce fino a coprirle, partendo dal lato indicato.
What's upon socials
sette card a ventaglio quando entrano nello schermo
Le card dei social a ventaglio
Cosa vedi. Sette card impilate si aprono a ventaglio quando la sezione entra nello schermo, ognuna con un post.
Come è fatto. Le card sono sovrapposte nello stesso punto con l'origine della rotazione molto in basso, come tenute in mano. Quando la sezione entra, ognuna ruota di un angolo diverso, da meno 36 a più 36 gradi, con un piccolo ritardo tra l'una e l'altra. Al passaggio la card si alza.
macchine a stati Rive su canvas, non GIF
Le animazioni Rive: menu, frecce, caricamento
Cosa vedi. L'hamburger si trasforma in una x, la freccia dei bottoni scappa e rientra al passaggio, il monogramma si disegna nel caricamento. Tutto morbido e vettoriale.
Come è fatto. Sono file Rive caricati su canvas, con macchine a stati: il bottone ha uno stato normale e uno hover, il menu aperto e chiuso, il caricamento riceve la percentuale. Il codice cambia solo l'input; il disegno e il tempo stanno nel file, che il motion designer può aggiornare da solo.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni sito di uno sportivo o di un personaggio
Atleti, artisti, creator, squadre: se il sito è per i tifosi, deve farli sentire vicini.
01
Un oggetto, non un logo
Il casco appare tre volte e diventa la firma del sito. Un oggetto vero si ricorda più di un marchio.
02
Falli toccare
Il casco sotto il mouse, le card a ventaglio, la cornice che si apre: ogni cosa risponde. Un tifoso vuole interagire, non leggere.
03
La voce, non la biografia
Tre frasi in prima persona tra le foto valgono più di una scheda con i dati. I dati stanno nella pagina in pista.
04
Le animazioni in un file
Con Rive le animazioni stanno in un file a parte: chi le disegna le aggiorna senza toccare il codice.
05
Due uscite chiare
Il negozio e i social: chi è arrivato in fondo deve poter comprare o seguire subito.
Il prossimo potrebbe essere il tuo
Vuoi un sito che i tifosi ricordino?
Atleti, artisti, creator, squadre: se il tuo sito è una scheda con i dati, ripartiamo da un oggetto e da una voce. Raccontaci chi sei: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti