Motion: Reel di eventi e interfacce
- Categoria:
- Motion design
- Ruolo:
- Concept, motion design e sound design
- Periodo:
- 2026
In sei settimane ho realizzato dieci Reel verticali dedicati a otto eventi tech e startup in Brasile, ognuno costruito dentro il sistema di brand dell'evento. Ho portato ogni Reel dal concept al render finale in Remotion, un framework video basato su React, aggiungendo livelli WebGL o filtri SVG quando il pezzo lo richiedeva. Più in basso, la pagina mostra anche il motion nelle interfacce e sul web, da due progetti di prodotto: Yankee e Zyla.
Origine: i Reel sono di mia iniziativa, non commissionati da nessun evento o brand. Nove dei dieci sono pubblici su Instagram, tutti tranne quello del Festival SGB. I pezzi per le interfacce vengono dai case Yankee e Zyla di questo sito.
Lovable Day São Paulo, fatto il giorno dell'evento
Il Lovable Day São Paulo si è svolto il 16 ottobre 2026 alla Community Creators Academy. Ero lì e ho fatto il Reel lo stesso giorno. L'idea è una chat di Lovable che costruisce l'evento: si apre con un prompt, le foto e il girato della giornata occupano lo schermo sotto la frase "Do prompt ao palco" (dal prompt al palco) e il finale torna nella chat, con l'invito a costruire il prossimo. Il font è Inter Tight e i loghi vengono dal Brand Hub di Lovable. Lo sfondo è un mesh gradient in WebGL, in modalità scura, con i colori campionati dalla palette ufficiale di Lovable.
Scena per scena
- 0:00Il prompt "Cria o maior evento de Lovable do mundo, em São Paulo." (crea il più grande evento di Lovable al mondo, a São Paulo) viene digitato a caratteri grandi in gradiente, si aggancia alla casella del prompt e parte.
- 0:04Torna come messaggio in chat, "Pensando..." (sto pensando) pulsa accanto al cuore del logo di Lovable e la risposta si scrive parola per parola: "Construindo o Lovable Day São Paulo." (sto costruendo il Lovable Day São Paulo).
- 0:08Quattro card con il girato dell'evento salgono in prospettiva, con spring sfalsate, e ognuna cambia clip due volte.
- 0:11Un clic apre una delle card a tutto schermo. "Lovable", "Day" e "São Paulo" entrano una parola alla volta, e il drop della traccia arriva a 0:12.
- 0:16Otto inquadrature della giornata, una ogni tre battiti della traccia a 120 BPM, legate da whip, stacchi netti e un light leak. "Do prompt" e "ao palco." entrano sopra, una riga alla volta.
- 0:28Cinque card inclinate (quattro clip e una foto) salgono con spring e fluttuano, con motion blur lungo la loro traiettoria.
- 0:31Di nuovo nella chat, la domanda "Quer construir o próximo?" (vuoi costruire il prossimo?) riceve la risposta "Bora construir!" (costruiamolo!), e la camera si tuffa nel pulsante di invio.
- 0:33La card finale fa entrare "Lovable Day", "São Paulo", "16.10.2026" e il logo, ogni riga con la sua spring, sotto la stessa luce del primo fotogramma.
La serie
Un Reel per ciascuno degli altri sette eventi, in estratti di 10 secondi, senza audio e in loop. I link aprono i pezzi completi su Instagram.
DevDay Exchange, Florianópolis
Prende il suo linguaggio dall'apertura del keynote dell'OpenAI DevDay 2026: un volto verde piatto, con occhi "0", esplode in particelle che scrivono "OpenAI", e il "[2026]" di "OpenAI DevDay[2026]" si decifra lettera per lettera fino a diventare "[Floripa]". Sul drop, il fiore di OpenAI entra ruotando e la prima foto si apre al suo interno. Si chiude su "Valeu, [Floripa]" (grazie, Floripa). 27 s, evento del 22 ottobre 2026. Make-a-thon, Friends of Figma Floripa
Il pezzo dei risultati si apre sull'abbraccio della premiazione, prima di qualsiasi logo, e mette la sfida in tipografia: "Crie uma experiência que gere muita ansiedade" (crea un'esperienza che generi molta ansia). Il vincitore viene svelato in due battute: "E o resultado..." (e il risultato...), poi "Venceu:" (ha vinto:) e "FinDuck". Le transizioni sono forme dell'identità stessa: un fiore, esagoni, il merletto a tombolo e una scacchiera. 40 s, evento del 24 ottobre 2026. Room 30, Rivool Edition
L'incontro di Rota 14 e Rivool Finance su "O novo dinheiro" (il nuovo denaro). Il pezzo si apre su "Todo empreendedor pensa no negócio. Quem pensa no dinheiro?" (ogni imprenditore pensa al business. Chi pensa al denaro?), e l'inquadratura finale ripete quella composizione con la risposta: "Uma sala inteira, na mesma mesa" (una sala intera, allo stesso tavolo). Nel mezzo, il girato scorre dentro un "30" traforato. 32 s, evento del 30 settembre 2026. Sunset Roundtable, Indicium
Vetro cannettato in WebGL e un filtro SVG di displacement che deformano le foto dell'incontro. 37 s, ottobre 2026. Festival SGB: ti fidi o verifichi?
Il pezzo che ha definito le regole della serie, con i colori del festival e il carattere Sora. Si apre su "400 currículos. A IA fez o ranking. Você confia?" (400 curriculum. L'IA ha fatto la classifica. Ti fidi?) e risponde a quella domanda nel finale. 40 s, settembre 2026. Build Day São Paulo, Claude Community
Si apre con "Saí de Floripa por causa disso" (sono partito da Floripa per questo) e si chiude con "Floripa vem aí" (ora tocca a Floripa). In mezzo, una mappa del percorso tracciata con i dati dell'IBGE (l'istituto nazionale di geografia e statistica del Brasile) e i loghi del press kit di Anthropic. 47 s, evento del 18 settembre 2026. EAG Global Buildathon, Florianópolis
Il primo pezzo della serie: un globo di punti, un diamante di Ethereum in 3D e la traccia Tides, con licenza CC-BY e attribuzione. 60 s, evento del 12 settembre 2026. Altri due della serie
Una versione del pezzo di Lovable con voce fuori campo e un secondo Reel del Make-a-thon, dedicato ai pitch.
Le regole della serie
Il pezzo del Festival SGB ha definito le regole su sfondo, tipografia, girato e narrazione, e i Reel successivi sono partiti da lì. Solo i Reel del Buildathon e del Build Day sono venuti prima. Quando un brand ha già un linguaggio visivo forte, il pezzo segue il brand: quello di Lovable è in modalità scura, sui colori di Lovable, e quello del DevDay prende il linguaggio dal keynote dell'OpenAI DevDay.
- Sfondo
- Un colore del brand, mai il nero di default. Scuro solo quando è scuro il materiale del brand stesso.
- Tipografia
- Una frase alla volta, a caratteri grandi, che resta sullo schermo il tempo di leggerla sul telefono prima che entri la successiva.
- Foto e girato
- Si muovono come oggetti dentro il sistema grafico, in card, griglie e lettere traforate, oppure riempiono l'inquadratura sotto un'unica frase.
- Narrazione
- Un gancio nei primi secondi, che il finale risolve.
- Loghi
- Solo file ufficiali, dal press kit, dal brand hub o dalle grafiche ufficiali di ogni brand, con la fonte annotata.
- Timing
- La maggior parte dei pezzi gira su una griglia di 120 BPM, un battito ogni 15 fotogrammi a 30 fps. Sunset e Lovable la usano solo per tagliare i montaggi, e i pezzi del Make-a-thon e del DevDay seguono il tempo della propria traccia. Il testo entra con un ease-out deciso, e loghi e card arrivano con spring.
- Audio
- La musica, quando c'è, è una traccia su licenza oppure CC-BY con attribuzione. Gli effetti vengono da un kit di suoni sintetizzati. Il missaggio di questi Reel punta a -14 LUFS, con true peak sotto i -2 dBTP.
- Controllo qualità
- Prima che un render esca, uno script scorre ogni fotogramma e segnala fotogrammi neri, fotogrammi congelati e salti di luma, poi misura la loudness.
Motion nelle interfacce e sul web
Due pezzi dal lavoro di prodotto: il video di motion per Yankee, un'app social per iPhone, e l'apertura animata del case Zyla su questo sito, disegnata con il codice.
Yankee, un social network per iPhone
Un estratto dal pezzo di Yankee. Yankee è un progetto per un cliente: un social network pubblicato sull'App Store. Lavoro all'interno del suo team su product design, identità visiva e motion. Il pezzo alterna tipografia cinetica e schermate dell'app. In questo estratto, "the feed adapts to you" entra una parola alla volta, ogni colore scelto nell'editor del profilo ricolora l'intero profilo e, in Spin, un tocco sull'opzione video riunisce quattro video in una griglia.
Zyla: una traccia che disegna la Z
L'apertura del case Zyla, registrata dalla pagina online, che è in portoghese. Distanza e tempo nella scheda salgono mentre la traccia disegna la Z, e alla fine "Pausar" (pausa) diventa "Correr de novo" (corri di nuovo). Il case Zyla su questo sito si apre con un'animazione disegnata in tempo reale su un canvas 2D. Di notte, in una vista da drone, una runner lascia una traccia GPS che si illumina di magenta fino a completare la Z del marchio Zyla. La falcata, la coda di cavallo e la camera sono calcolate solo a partire dal tempo, quindi i test possono verificare qualsiasi fotogramma. Con l'opzione Riduci movimento attiva, la pagina mostra il fotogramma finale.
Nell'app Zyla, la celebrazione di fine corsa mostra il percorso appena completato, senza coriandoli né suoni. Ho prototipato l'animazione sul web, con una modalità a movimento ridotto, e il team di ingegneria ha usato il prototipo come riferimento. Ho anche fatto la ricerca e il design del registratore di corse con GPS e l'ho consegnato con le schermate nell'ordine del flusso, uno storyboard e una specifica del motion. L'ingegneria l'ha sviluppato ed è arrivato negli store a settembre 2026.
Apprendimenti chiave
Con le regole definite nel pezzo del Festival SGB, ogni nuovo Reel è partito da decisioni già prese su sfondo, tipografia e girato. Così ho potuto dedicare il mio tempo all'idea di ciascun evento. Lavorando in codice, il controllo del render, il kit di suoni e, per la maggior parte dei pezzi, la griglia a 120 BPM sono passati da un Reel all'altro.
Hai un progetto che ha bisogno di motion?
Progetto e animo motion graphics 2D dentro il sistema di ciascun brand, dai Reel per eventi alle interfacce di prodotto.
