Una landing che si guarda come un film, per un'app di motion graphics in arrivo
Si scorre e la palla del marchio rimbalza, entra nella settimana di chi fa video e mostra cosa cambia con Animatio. Chi vuole sapere quando esce lascia l'email, con doppia conferma.
- Cliente
- M's Works
- Settore
- Software di motion graphics · Palermo
- Servizi
- Sviluppo Web & App · UI/UX & Design System · GDPR & Privacy
- Online
- animatio.app ↗
Il contesto
Animatio è l'app desktop di motion graphics di M's Works, con un assistente IA dentro l'editor: impara il brand e prepara formati, sottotitoli, voce e musica. M's Works la usa ogni settimana per i suoi video, ma non è ancora in vendita. Serviva un sito che la presentasse prima dell'uscita, senza download né data, con un modo per farsi avvisare. Si partiva da una bozza animata già approvata, composta a misura fissa per computer (1440 × 900) e telefono (390 × 844), e da un'identità di marca definita: colori, caratteri, curve del movimento.
Il problema
Raccontare un'app che ancora non si può scaricare, senza schermate vere né un video.
Portare sul web una bozza animata disegnata a misura fissa, senza perdere il movimento su schermi diversi.
Le animazioni legate allo scroll non ci sono in tutti i browser: Firefox non le ha.
Raccogliere le email di chi vuole essere avvisato, con un consenso che regga e senza iscrizioni fatte da programmi.
Un film animato deve restare leggibile per chi riduce il movimento o ingrandisce la pagina.
Ogni scelta ha un vincolo dietro
Il vincolo
Le scene della bozza si muovono con le scroll-driven animations del CSS: Chrome, Edge e Safari 26 le hanno, Firefox no.
La scelta
Animazioni scritte in CSS e lasciate al browser. Dove mancano, un piccolo script porta le stesse animazioni al punto giusto dello scroll.
Perché
Una libreria come GSAP ScrollTrigger avrebbe rifatto il movimento in JavaScript anche dove il browser lo fa da solo, fuori dal thread principale, e un polyfill era una dipendenza in più. Il fallback scritto da noi riusa le stesse curve e gli stessi keyframe del CSS: un solo film da mantenere, nessuna libreria nel sito.
Il vincolo
La bozza approvata è disegnata a misura fissa, con coordinate esatte per traiettorie, griglie e forme.
La scelta
Due tavole per scena, una per il computer e una per il telefono, scalate per stare nello schermo.
Perché
Rifare ogni scena con un layout fluido voleva dire ricalcolare traiettorie e intervalli a ogni larghezza, e allontanarsi dalla bozza approvata. Il compromesso è dichiarato: sugli schermi lontani dai due formati la tavola si rimpicciolisce, e per lo zoom c'è una versione di lettura in colonna.
Il vincolo
I filtri antispam aprono da soli i link contenuti nelle email.
La scelta
Doppia conferma con un pulsante: il link apre una pagina e l'iscrizione vale solo quando una persona preme «Confermo l'iscrizione». Il pulsante funziona anche senza JavaScript.
Perché
Con la conferma all'apertura del link, un programma avrebbe iscritto chi non l'ha chiesto, e quella non è la prova del consenso di una persona. Lo stesso per la disiscrizione: un clic automatico toglierebbe dalla lista chi vuole restarci.
Il vincolo
Di serie, la libreria delle traduzioni salva la lingua in un cookie e reindirizza secondo la lingua del browser.
La scelta
Niente cookie e niente reindirizzamento: l'italiano sta su /, l'inglese su /en, e la lingua la sceglie chi legge.
Perché
Con le impostazioni di serie il sito avrebbe scritto un cookie e mostrato a ogni visitatore una versione diversa allo stesso indirizzo. Così il sito non imposta nessun cookie, non serve un banner, la cookie policy dice il vero e i motori trovano sempre ogni lingua al suo indirizzo.
Cosa abbiamo costruito
Il film dello scroll
Sei scene, dal rimbalzo della palla alla chiamata finale, che si muovono mentre scorri, in versione computer e telefono.
Design system a token
Colori, caratteri, spazi e curve del movimento generati da un unico file di token, con una pagina che li mostra tutti.
Newsletter con doppia conferma
Iscrizione con conferma a pulsante, disiscrizione in un clic e pulizia automatica dei dati scaduti.
Due lingue, pagine legali, accessibilità
Italiano e inglese, privacy, cookie, termini e dichiarazione di accessibilità, con una versione di lettura per chi ingrandisce la pagina.
Pronto per motori e assistenti IA
Metadati per ogni pagina, hreflang, sitemap, dati strutturati e un file llms.txt che dice cos'è Animatio e cosa non è.
Il risultato
Il sito è online su animatio.app, in italiano e in inglese.
Sei scene animate senza nessuna libreria di animazione.
Nessun cookie e nessun analytics: il sito non ha bisogno di un banner.
Iscrizione con doppia conferma provata dall'inizio alla fine in produzione.
Animazioni riviste con un audit di accessibilità: contrasto, movimento ridotto, zoom e focus corretti.
Tecnologie
Hai un progetto simile?
Raccontaci da dove parti. Ti rispondiamo con una proposta chiara e tempi realistici, senza impegno.