Case study · Sito web · Viaggi su misura
Finddly
Un'agenzia di viaggi su misura vende un'idea di tempo, non un catalogo. Qui la pagina apre con cinque destinazioni a tutto schermo che si sfogliano tenendo premuto, e poi racconta chi scrive i viaggi, le rotte, le esperienze e come si inizia.
- Progetto
- Finddlybrand concept
- Settore
- Viaggi su misuraitinerari scritti a mano
- Tipo
- Sito web in una paginareel, rotte, esperienze, diario, modulo
- Cosa abbiamo fatto
- Sviluppo su misura da un frame Figmahero, motion, sito completo
- Tecnologie
- Next.js, React, Tailwind, Framer Motionstatico, su Vercel
Il punto di partenza
Un frame Figma da far muovere davvero
Il punto di partenza è un frame Figma con diciassette fotogrammi: una hero di viaggi dove ogni destinazione occupa tutto lo schermo e, tra una e l'altra, le foto si rimpiccioliscono in card, viaggiano di lato e si riaprono. Nel file c'era anche la scritta «click and hold» sul cerchio in basso: il gesto principale doveva essere tenere premuto.
Abbiamo letto la geometria dei fotogrammi e l'abbiamo trasformata in un modello: due soli valori, la posizione della slide e quanto è card, da cui deriva tutto il resto. Poi abbiamo costruito il sito intorno: manifesto, cinque rotte, quattro modi di viaggiare, galleria, diario, voci dei viaggiatori e il modulo.
01
Un'apertura che si tiene in mano
Cinque destinazioni a tutto schermo, da sfogliare con la rotella, con un tocco o tenendo premuto. E un tasto per saltare, sempre.
02
Fedeltà al disegno, al pixel
Dimensioni, ritmi e gradienti presi dal file Figma, compresa la sfumatura che i browser interpolano in modo diverso.
03
Leggero e accessibile
Solo trasformazioni e ritagli, niente ricalcoli di layout. Lettore di schermo, tastiera e movimento ridotto gestiti.
Cosa abbiamo costruito
Un reel e poi il sito
La hero tiene la pagina finché non hai visto le cinque mete, o finché non salti. Poi si scorre normalmente.
01
Il reel delle destinazioni
Caribe, Tromso, Amazon, Maldiva, Alaska. Ognuna occupa lo schermo con la parola enorme, l'etichetta sopra e la didascalia in basso. Tra una e l'altra le foto si chiudono in card, scorrono di lato e si riaprono: un secondo e mezzo.
In basso a destra il contatore con il rullo dei numeri, al centro il cerchio «scroll or hold».
02
Chi scrive i viaggi
«Non vendiamo destinazioni. Pianifichiamo l'anno di cui parlerai.» Due paragrafi su chi scrive gli itinerari a mano e quattro numeri: viaggi scritti, paesi, anni sul campo, viaggiatori che tornano.
Ogni blocco compare salendo di poco quando entra nello schermo.
03
Le cinque rotte
Una lista: numero, nome, regione. Passando il mouse su una riga si apre la descrizione con stagione, notti e prezzo, e a destra la foto cambia con una dissolvenza e la sua sfumatura di colore.
La foto è fissa mentre la lista scorre: resta sempre in vista.
04
Quattro modi di passare il tempo
Barca privata, aurora, tettoia della foresta, laguna: quattro card alte con le notti e una frase. Al passaggio la foto si ingrandisce piano.
Poi una citazione su una foto a tutta larghezza e la galleria che si trascina di lato.
05
Le voci e il modulo
Tre voci di viaggiatori, con meta e anno. Poi «dicci più o meno quando»: un modulo con cinque campi e la promessa che a leggere è una persona, entro due giorni.
Tre uffici, Lisbona, Reykjavík, Singapore, e il piede con tutte le rotte.
Da telefono il reel si sfoglia con uno scorrimento laterale o un tocco; il cerchio si tiene premuto con il dito.
Come è fatto
Sotto il cofano: due numeri che muovono tutto
Sei meccanismi costruiti a mano, uno alla volta. Dalla hero al resto della pagina.
- Next.js 16
- React 19
- Framer Motion
- Tailwind 4
- clip-path
- Vercel
schermo intero → card → viaggio → schermo intero
Da schermo intero a card e ritorno
Cosa vedi. Tra una destinazione e l'altra la foto si chiude in una card, scorre di lato con le vicine e si riapre a tutto schermo. Il numero rotola, il cerchio scende.
Come è fatto. Due valori animati insieme: la posizione della slide e quanto è card, da zero a uno. Ogni slide non cambia mai dimensione: si ritaglia con clip-path: inset e si sposta con transform, così tutto resta sul compositore senza ricalcolare il layout. La foto si riduce meno della finestra, per mostrare un ritaglio e non una copia in piccolo.
tieni premuto: avanza finché non lasci
Un gesto: tieni premuto e viaggia
Cosa vedi. Se tieni premuto ovunque, le destinazioni continuano a scorrere finché non lasci. Un tocco ne avanza una, uno scorrimento laterale anche.
Come è fatto. Un solo puntatore, tre gesti. Alla pressione parte un timer di 160 millisecondi: se nel frattempo il dito si muove di lato è uno swipe, se resta fermo è una presa e il reel avanza in ciclo. Se lasci prima del timer, è un tocco. Il cerchio si allarga dell'8% mentre tieni.
Paradise
Caribe
foto 0 · brand 240 · nav 320 · titolo 560 · cue 1000 ms
L'entrata a scalare, senza JavaScript
Cosa vedi. All'apertura la foto si assesta da un leggero ingrandimento e i testi salgono uno dopo l'altro: marchio, menu, etichetta, titolo, didascalia, contatore, cerchio.
Come è fatto. Animazioni CSS pure con ritardi crescenti, da zero a un secondo, così partono prima che il JavaScript sia caricato e funzionano anche senza. I testi salgono di 22 pixel su una curva che frena forte; la foto passa da 1.06 a 1 in 1.6 secondi.
Aurora
Tromso
We plan the year you'll talk about.
kicker × 0.20
titolo × 0.16
i livelli si separano mentre la hero esce
I livelli si separano quando la hero esce
Cosa vedi. Scorrendo via dalla hero, la foto, l'etichetta e il titolo salgono a velocità diverse e si staccano l'uno dall'altro.
Come è fatto. La hero scrive due variabili CSS sulla pagina: i pixel percorsi e il progresso da zero a uno. Ogni livello moltiplica i pixel per il suo fattore: foto 0,35, etichetta 0,20, titolo 0,16. La misura è letta a ogni frame dal riquadro reale, così non si scolla mai.
Dec — Apr 9 nights from €6,400
Sep — Mar 6 nights from €5,150
May — Nov 8 nights from €7,200
hover: la riga si apre, la foto sfuma
La lista che si apre e la foto che sfuma
Cosa vedi. Passi su una rotta: il nome si accende, la descrizione si apre con stagione e prezzo, e a destra la foto cambia con la sua sfumatura di colore.
Come è fatto. La riga aperta è una griglia che passa da zero a una riga, così l'altezza si anima senza conoscerla. Le cinque foto sono sovrapposte e cambiano solo di opacità in 700 millisecondi; sopra c'è un gradiente con il colore della meta. Il riquadro è sticky e segue la lista.
We plan the year you'll talk about.
rotella: cambia meta · all'ultima scorre
La rotella cambia meta, poi libera la pagina
Cosa vedi. Finché sei in cima, la rotella non scorre la pagina: cambia destinazione. Arrivato all'ultima, la pagina si libera e scorri normalmente. Oppure premi «skip intro».
Come è fatto. La hero intercetta la rotella solo se la pagina è in cima e ci sono mete da vedere, accumulando i delta finché superano una soglia. Quando il reel si è fermato sull'ultima, rilascia lo scorrimento. Le voci del menu e il tasto salta funzionano sempre: nessuno resta intrappolato.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni sito di viaggi o esperienze
Agenzie, tour operator, hotel, esperienze: se vendi un tempo e non un prodotto, la pagina deve farlo sentire.
01
Apri con le mete, non con il menu
Cinque foto a tutto schermo con una parola sola dicono più di qualsiasi claim. Il resto viene dopo.
02
Un gesto nuovo va accompagnato
Tenere premuto è bello ma non ovvio: la scritta sul cerchio, la rotella che funziona comunque e il tasto per saltare fanno la differenza.
03
Non intrappolare mai
Una hero che tiene la pagina deve liberarla da sola e lasciare sempre un'uscita. Altrimenti diventa un muro.
04
Fedeltà al disegno è misurabile
Leggere i fotogrammi del file e ricavarne i numeri dà un risultato identico al design, non simile.
05
Muovi solo ciò che il browser muove bene
Trasformazioni, ritagli e opacità: fluido anche su telefoni vecchi. Niente altezze e larghezze animate.
Il prossimo potrebbe essere il tuo
Vuoi un sito che faccia sentire il viaggio?
Agenzie, tour operator, hotel, esperienze: se hai un'idea in un file Figma o solo nella testa, la costruiamo per davvero. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti