Crav Burgers, com’è fatto: l’hamburger che si impila, la corda degli ingredienti e il piede che fa il giocoliere

Crav Burgers è il sito di CRAV, una burgeria di smash burger che si presenta come nata nel 1997 in Navarra, in Spagna: pane tostato, carne schiacciata sulla piastra, cheddar e una glassa al miele e peperoncino. Le pagine sono quattro, Home, Burgers, Spices e Contact. È un sito che fa venire fame e non si vergogna di essere un cartone animato: il fondo è un beige di carta da forno, #f5e3cd, i titoli sono di un rosso pomodoro, #f91814, la senape è #ffd750 e la sua versione scura #f4a804, e ogni disegno ha il contorno bordeaux, #4C0016. I caratteri sono due caratteri da insegna di Google Fonts: Mouse Memoirs, alto e stretto, per quasi tutto, e Modak, tondo e gonfio come una gomma da masticare, per il marchio. Su Awwwards è stato Sito del giorno il 13 giugno 2026, con 7,25 dalla giuria e il premio degli sviluppatori, 7,15. Lo firmano lo studio Anyflow con Vasav Prajapati, Pritam Das e Gaurav Verma.

È un sito Next.js 16.2, con React 19. Le animazioni sono di GSAP 3.15, con ScrollTrigger, SplitText, MorphSVG, MotionPath, Inertia e ScrollToPlugin, e lo scorrimento morbido è di Lenis, con una durata di 1,2 secondi, mosso dal ticker di GSAP. Il resto è SVG disegnato a mano, molto: un hamburger del caricamento ha più di trenta tracciati. I valori che citiamo vengono dal codice pubblico, i pezzi minificati che il sito carica, rimessi in ordine.

Lo smontiamo in tre momenti, con una demo rifatta da zero per ognuno, nei colori pieni del sito, per una burgeria inventata, STAKK: i disegni, le parole e il codice sono nostri. Dal sito abbiamo preso le idee e, dove lo diciamo, i numeri.

L’hamburger che si impila

Il caricamento è un hamburger che si fa da solo su un fondo rosso. Cadono dall’alto il pane di sotto, la carne, il formaggio, il pomodoro, l’insalata e il pane col sesamo, e a ogni strato la pila si schiaccia un attimo; in basso una scritta racconta cosa succede in cucina, TOASTING THE ARTISAN BUN, SEARING THE GLAZED PATTY, MELTING CHEDDAR CHEESE, e una barra senape si riempie. Alla fine schizzano le briciole, l’hamburger fa un saltello, compare READY TO CRAV! e tre teli di colore si alzano uno dopo l’altro, con il bordo che si incurva, scoprendo la pagina.

È una sola timeline di GSAP. Gli strati partono 800 pixel più in alto, trasparenti e a 0,8 della loro misura, e cadono uno ogni 22 centesimi di secondo, in 0,32 secondi con power1.in, che accelera come un peso vero. Quando uno strato tocca, parte ruotato di 12 gradi in più o in meno, a caso, e torna alla sua inclinazione, meno 2 gradi la carne, più 1 il formaggio, meno 4 il pomodoro, più 3 l’insalata, in 0,45 secondi con back.out(2.5); intanto tutta la pila si schiaccia, 0,88 in altezza e 1,06 in larghezza in sei centesimi, rimbalza a 1,03 e 0,98 e si rimette dritta in dodici. Il contatore va da 0 a 100 in un secondo e mezzo. A 1,42 secondi quattordici briciole, senape, bianche e verdi, partono dal centro in cerchio fra 110 e 200 pixel di distanza, un po’ verso l’alto, e si spengono in 0,8 secondi; tre decimi dopo la pila sale di 50 pixel crescendo a 1,08 e torna giù con bounce.out.

I teli sono tre SVG a tutto schermo, 100 per 100 unità stirate senza rispettare le proporzioni, ognuno con un tracciato solo: un rettangolo il cui lato in basso è una curva quadratica con il punto di controllo nel mezzo. Il rosso sta davanti, poi l’arancio, #EF6F2E, poi il bordeaux. Per alzarli il sito anima tre numeri, il lato sinistro, il destro e il centro: i lati salgono in 0,8 secondi con power2.inOut, il centro in 1,1 con power4.inOut, così resta indietro e il bordo pende verso il basso come una tenda pesante. I tre teli partono a 12 centesimi l’uno dall’altro, e l’hamburger intanto vola via verso l’alto, mille pixel in tre quarti di secondo.

Nella nostra demo l’hamburger è disegnato da noi e da vicino: il pane lucido con quattordici semi di sesamo, la mollica tagliata, la carne schiacciata con la crosticina e il sugo che cola, il cheddar che gocciola dopo l’atterraggio, il pomodoro con i semi, la cipolla, l’insalata riccia e il cetriolo, il vapore che sale; tutto si posa su un tagliere di legno la cui ombra si allarga a ogni strato, e i teli sono di salsa lucida, con le gocce che pendono dal bordo mentre salgono. Le scritte sono quelle di STAKK. La caduta, i tempi a 22 centesimi, le inclinazioni, lo schiacciamento, le quattordici briciole, il saltello e i tre teli con i lati e il centro a tempi diversi sono quelli del sito; la pagina del marchio che entra sotto i teli e il tasto per rivederlo sono nostri.

La corda degli ingredienti

Sul computer il puntatore del sito si tira dietro una corda bianca, e sulla corda sono infilati quattro ingredienti, l’insalata, il pomodoro, il formaggio e la carne, ognuno in un tondo di vetro smerigliato. Quando si muove il mouse la corda si allunga e serpeggia; quando ci si ferma si raccoglie tutta sotto la punta. Sopra il pulsante Order Now la corda sparisce, per non coprirlo.

La corda è fatta di otto punti, a 8 pixel l’uno dall’altro. Il primo segue il puntatore in cinque centesimi di secondo; ogni altro punto si muove solo se il precedente si è allontanato più di 8 pixel, e allora va verso di lui fino a quella distanza in 0,12 secondi più un centesimo per ogni posto, con power3.out: la coda arriva sempre un po’ dopo la testa. A ogni fotogramma il sito ridisegna un tracciato SVG che passa per i punti medi con curve quadratiche, così la corda è morbida anche con pochi punti. Il trucco della corda che si raccoglie sta nella lunghezza: a ogni movimento torna a 8 pixel, e subito dopo GSAP la porta a zero in mezzo secondo con expo.out. Finché ci si muove, la corda resta lunga; appena ci si ferma, i punti si avvicinano fino a toccarsi.

Gli ingredienti stanno sui punti 0, 3, 5 e sull’ultimo, e ognuno gira secondo la direzione del tratto di corda prima di lui, misurata con l’arcotangente. Sopra un elemento con l’attributo data-cursor-hide, il pulsante Order Now, tutto si spegne in sei decimi di secondo con power3.inOut. La corda c’è solo con un mouse vero, il puntatore fine, e solo se chi guarda non ha chiesto meno movimento.

Nella nostra demo gli ingredienti sono disegnati da noi e la corda segue anche il dito sul telefono, mentre lo si trascina. Gli otto punti, i cinque centesimi della testa, il ritardo che cresce lungo la coda, le curve per i punti medi, la lunghezza che torna a zero in mezzo secondo, i quattro posti degli ingredienti e la corda che sparisce sopra il pulsante sono quelli del sito, e anche il titolo che scoppia lettera per lettera e il pulsante che cambia forma vengono da lì; i punti però stanno a 16 pixel, il doppio, perché da 8 le perline si coprivano, e il palco della burgeria con i suoi adesivi è nostro.

Il piede che fa il giocoliere

In fondo alla pagina c’è un piè di pagina beige con i collegamenti, la frase Smashed patties · toasted buns · est. 1997 e il marchio CRAV enorme, rosso col contorno bianco, largo quanto lo schermo. Davanti, quattro ingredienti vengono lanciati in aria uno dopo l’altro, girano su sé stessi e ricadono, senza fermarsi mai, come nelle mani di un giocoliere.

Ogni ingrediente ha la sua corsia, al 12, al 34, al 56 e all’80 per cento della larghezza, e ogni lancio è una timeline nuova con i numeri estratti a caso. Si parte da 22 centesimi dell’altezza dello schermo sotto il centro, si sale fino a un apice fra 38 e 60 centesimi più su in un tempo fra 0,9 e 1,3 secondi con power2.out, che frena salendo, e si ricade con power2.in, che accelera scendendo, in un tempo da 1,15 a 1,5 volte più lungo della salita: è la gravità fatta con due curve. Intanto l’ingrediente deriva di lato con sine.inOut e gira, con una curva lineare, fra 220 e 600 gradi in un senso o nell’altro; nell’ultimo quarto di secondo si spegne, e dopo una pausa fra 0,2 e 0,9 secondi riparte. Il primo lancio di ogni ingrediente è sfalsato di 55 centesimi, più un poco a caso. Sul telefono i numeri sono più piccoli: apice fra 12 e 18, rotazioni fra 80 e 180 gradi, ingredienti un po’ più grandi.

Quando la scheda del browser è nascosta, i lanci in corso si fermano e ripartono al ritorno. Con il movimento ridotto gli ingredienti non volano: compaiono sospesi al loro posto, ognuno con una piccola inclinazione scritta a mano. Il marchio CRAV entra con le lettere che saltano su da sotto con back.out(2.6), in tre quarti di secondo.

Nella nostra demo gli ingredienti sono nostri e il piè di pagina è quello di STAKK, con i suoi collegamenti e un hover a tema. Le quattro corsie, gli apici, il rapporto fra salita e discesa, la deriva, le rotazioni, le pause, lo sfalsamento, i numeri del telefono, le posizioni del movimento ridotto e l’onda in tre tempi dei bordi fra le sezioni, che abbiamo messo in cima al palco, sono quelli del sito; i lanci misurati sull’altezza vera del palco, perché stiano anche in una casella piccola, sono nostri.

Gli altri dettagli

L’hamburger della home entra da metà della sua misura, ruotato di 5 gradi e 100 pixel più in basso, in un secondo e mezzo con back.out(1.5), e poi galleggia per sempre, su e giù di 15 pixel ogni due secondi e mezzo. I titoli sono di due tipi: quelli che salgono riga per riga da sotto una maschera, con SplitText, in 1,4 secondi e una riga ogni 15 centesimi, e quelli che scoppiano parola per parola, da zero alla loro misura con back.out(2.35), una parola ogni 55 millesimi, ognuna da un’altezza e un’inclinazione a caso. Le sezioni non finiscono dritte: il bordo è un’onda, un tracciato con tre curve S del colore della sezione di sopra, i cui punti salgono e scendono in tre tempi diversi, 1, 2 e 1,8 secondi, in una timeline che va avanti e indietro senza fine; e quando la si raggiunge scorrendo si allunga fino a una volta e mezza, come una gelatina che cola. Anche la scheda del browser è animata: il titolo cambia ogni 0,8 secondi, Sizzling, Grilling, Flipping, Serving, Enjoy, e durante il caricamento dice Craving.

Il pulsante Order Now è una macchia rossa col bordo bianco che, sotto il mouse, prende con MorphSVG una forma a caso fra quelle disegnate, in mezzo secondo con back.out, e torna alla sua all’uscita. Nella sezione del take away un aereo vola lungo un tracciato mentre si scorre, con MotionPath, e le foto di cinque città, Berlino, Londra, New York, Sydney e Tokyo, saltano fuori quando l’aereo passa il 14, il 28, il 50, il 68 e il 91 per cento del percorso. Le foto delle città si possono anche spingere col mouse: quando il puntatore esce ne prendono la velocità, moltiplicata per trenta, e frenano con Inertia. Fra una pagina e l’altra tornano i tre teli, ma al contrario: salgono dal basso con il centro che arriva per primo: rosso, arancio e senape, con la parola Craving che lampeggia in mezzo.

Dove inciampa

Il caricamento non si ricorda di chi è già passato: ogni volta che si apre o si ricarica una pagina, lo scorrimento si blocca e l’hamburger si rifà da capo, per circa quattro secondi. La prima volta è una festa, la decima un’attesa. E la corda e i giocolieri sono gli effetti più simpatici del sito, ma sul telefono non ci sono: la corda è spenta senza un mouse e sotto i 768 pixel è nascosta.

Su tutta la pagina il testo non si può selezionare, perché il corpo ha user-select none: chi vuole copiare l’indirizzo o un orario non può. I pezzi di JavaScript della home pesano insieme circa 2 MB prima della compressione. Il sito però tiene conto del movimento ridotto quasi dappertutto: le righe e le parole compaiono solo in dissolvenza, gli ingredienti restano fermi, la corda non c’è.

Cosa ci portiamo via

Un sito di hamburger che sembra un hamburger: il caricamento è la ricetta, il cursore infila gli ingredienti, il piè di pagina li fa volare. E la fisica che si fa con poco: una caduta è power1.in, un rimbalzo è uno schiacciamento in tre tempi, la gravità è una salita con power2.out e una discesa più lunga con power2.in. Le stesse due curve, cambiando solo i numeri, fanno tutto il resto.