Contesto
Matteo Tirocchi è un art director. Il suo lavoro aveva bisogno di più di una griglia di immagini: aveva bisogno di un punto di vista. Il brief era un portfolio che sembrasse un luogo da attraversare — una home cinematografica, una sezione giocabile, un archivio visivo e contenuti bilingui IT/EN.
L'art direction e i contenuti sono di Matteo. Io ho costruito il sito intorno a loro: architettura front-end, motion, modello dei contenuti e deploy.
Il vincolo
Un portfolio che trasporta molto lavoro visivo ha un rischio prevedibile: diventa un template per gallerie. Il sito doveva tenere alto il lavoro senza rendere rumorosa l'interfaccia. E doveva restare navigabile su un telefono, dove sarebbe arrivata la maggior parte del traffico.
La parte difficile non era aggiungere motion. Era decidere dove il motion si guadagnava il suo posto.
Cosa ho costruito
- Un'architettura che può crescere. Next.js App Router con export statico, contenuti in Markdown e una struttura di rotte che separa portfolio, sezione play, archivio creativo e about.
- Un sistema di motion, non un mucchio di effetti. GSAP e Lenis per la home cinematografica, una sequenza di stanze WebGL e transizioni che si tolgono di mezzo quando inizi a leggere.
- Una versione mobile usabile. Menu a tutta altezza, anteprime edge-to-edge e controlli touch — le parti che di solito si rompono quando un portfolio desktop-first viene schiacciato su un telefono.
- Un percorso di deploy. Output statico su Cloudflare, con una build pubblicabile ovunque.
Risultato
Il sito è live su tirocchi.com. È stato distribuito come sito reale per un cliente, con un modello di interazione non standard, contenuti bilingui e un flusso che Matteo può aggiornare senza toccare il layout.
Cosa cambierei
Lo strato cinematografico è pesante. Una sequenza WebGL e uno stack di motion completo costano millisecondi reali su un telefono di fascia media. Se lo rifacessi, partirei da un budget di performance prima del motion design: lazy-load del bundle 3D/motion, un poster statico al primo paint e una misurazione LCP per rotta, non solo alla fine.
La lezione non è “meno motion”. È “motion con un budget”. È l'approccio che porterei oggi in un progetto per un cliente.