Pizzeria Moderna

Da dove nasce

Pizzeria Moderna non ha un cliente dietro: è un concept che mi sono dato da solo, per una pizzeria di quartiere immaginaria a Torino, zona Aurora — forno a legna, ventotto coperti, una lista corta di pizze fatte sempre allo stesso modo. Niente reinvenzione fine dining, niente catena: un posto che fa poche cose e le fa vedere.

Il punto non era vendere un servizio, era completare da solo l'intero percorso — direzione, UX, motion, sviluppo — su un caso solo, prima di proporlo a un cliente vero.

La maggior parte delle pizzerie indipendenti comunica online con un PDF del menù, una scheda Google e un profilo Instagram. Quei canali dicono cosa c'è da mangiare. Raramente spiegano perché l'impasto riposa ventiquattr'ore, perché la lista degli ingredienti è corta apposta, o come si sta in sala il venerdì alle otto — i dettagli che di solito sono il vero motivo per cui si sceglie una pizzeria piuttosto che un'altra.

La direzione scelta, e perché quella

Ho scelto di raccontare il mestiere, non il menù: forno, impasto, ingredienti, sala — con il menù come una tappa del racconto, non l'apertura.

L'impasto diventa una timeline legata allo scroll: un'immagine fissa e una barra che si riempie mentre si legge, così le ventiquattr'ore di riposo si percepiscono come tempo che passa, non come una riga di testo. Più avanti la pizza firma resta ferma a schermo mentre si scorre la sezione, si mette a fuoco e ruota leggermente — l'unico punto in cui il movimento serve solo a dare peso a un piatto, come una foto a piena pagina su una rivista.

Il pulsante di prenotazione compare due volte sole, in apertura e alla fine naturale del racconto: non segue chi scorre lungo tutta la pagina, perché non ogni sezione deve chiedere un'azione.

Anche il mobile è una composizione a parte, non il desktop rimpicciolito: il taglio diagonale dell'hero cambia angolo, i pannelli immagine di impasto e menù si abbassano perché non spingano il testo fuori schermo, e la navigazione diventa un pannello a schermo intero con tasto Escape e ritorno del focus — non un hamburger che apre la stessa lista rimpicciolita.

Come è fatto dentro

Next.js 16 con App Router e metadata basati su file (sitemap, robots, immagine Open Graph generata), componenti server per il testo e componenti client solo dove serve stato — la voce attiva del menù, il passo della timeline, la finestra di prenotazione.

Ogni animazione di comparsa passa da un solo componente con tre varianti — dissolvenza, maschera, scala — attivato da IntersectionObserver e disattivato del tutto quando il sistema chiede meno movimento. Nessuna libreria di animazione, nessuna dipendenza da scroll-jacking.

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS v4
• next/image

Cosa è cambiato

• Timeline dell'impasto legata allo scroll

  Immagine fissa e barra di avanzamento che si riempie mentre si legge, per far percepire il tempo di riposo prima ancora che il testo lo dica.

• La pizza firma tenuta a schermo

  Fissata e guidata dallo scroll per la durata della sua sezione — l'unico punto del sito dove il movimento serve solo a dare peso al piatto.

• Un solo pattern di animazione, disattivabile

  Dissolvenza, maschera, scala — sempre lo stesso componente, spento del tutto con prefers-reduced-motion.

• Il mobile non è il desktop rimpicciolito

  Taglio dell'hero, altezze dei pannelli immagine e menu di navigazione hanno valori dedicati, non una scala proporzionale del layout desktop.

• Zero dipendenze di runtime oltre React e Next.js

  Nessuna libreria di animazione o di componenti — il movimento gira su CSS e IntersectionObserver.

• Non è un locale vero

  Nessuna prenotazione, recensione o numero di attività reale. Il sito lo dichiara apertamente — è un concept, non una commessa travestita da una.