Hero di lancio da giocare
Quattro annunci di lancio interattivi fatti in SVGator: tieni premuto un pulsante, apri una scatola strappando la striscia, giri un pass, sfogli un mazzo di carte. Ognuno è un template: un secondo marchio è una serie di modifiche, non una nuova animazione.
Ignition: tieni premuto per lanciare
Il pulsante di lancio sta dentro un anello di carica da 36 segmenti. Tienilo premuto e l’anello si riempie in due secondi, mentre il conto alla rovescia scorre nel pulsante e il quadrante comincia a tremare; se lasci prima, tutto torna indietro. Se tieni fino in fondo parte: un lampo, un’onda d’urto, le scintille, e il prodotto sale con tre funzioni che si agganciano intorno.
Gesto e timeline
- riposo da 0,9 a 1,4 s in loop finché non premi
- tenere premuto suona charge, da 1,4 a 3,4 s
- lasciare lo riavvolge fino a 1,4 s
- a 3,4 s il lancio prosegue, poi da 6 a 9 s in loop
Si cambia per nome
- headline-line-1, headline-line-2, headline-live
- subhead-1/2, feature-1..3-label, cta-label
- logo, product-image (16:10)
- ogni livello con (brand color) nel nome
Il problema
Di solito un lancio si annuncia con uno screenshot o un video che si guarda per un secondo e si scorre via. Volevo annunci che chiedono un piccolo gesto, così il lancio succede quando lo fa succedere chi guarda.
Il mio ruolo
Concept, design visivo e motion dei quattro hero, costruiti in SVGator tramite il suo MCP con Claude, più lo script della pagina che collega ogni gesto alla timeline con il Player API di SVGator.
Il risultato
Quattro template riusabili, ognuno con due marchi. Lumen è l’originale; Harbor è nato modificando da 31 a 37 livelli per nome tramite l’MCP, in meno di tre minuti per hero. I file di questa pagina sono gli export di SVGator.
Tear-open box: trascina per aprire
La novità arriva come un pacco, con il nome stampato a stencil sul coperchio. Trascina la linguetta e la striscia si strappa alla velocità della tua mano; oltre l’80% la scatola finisce da sola: i lembi si ribaltano, esce la luce e il prodotto sale, con le funzioni attaccate come adesivi. Uno strappo non torna indietro: se lasci, la striscia resta dove l’hai lasciata.
Gesto e timeline
- riposo da 1 a 1,8 s in loop, la linguetta si muove
- trascinare scorre tear, da 1,8 a 3,8 s, solo in avanti
- oltre l’80% suona open, da 3,8 a 6,8 s
- poi da 6,8 a 9,8 s in loop
Si cambia per nome
- headline (stampa stencil), subline, testi dell’etichetta
- stamp, badge-line-1..3, feature-1..3-label, cta-label
- logo, product-image (16:10)
- strip-mask e torn-mask seguono lo strappo
Event pass: inclina, gira, strappa
Un invito da prendere in mano. Passa con il puntatore sul pass e si inclina, con la lamina olografica e la luce che ci scorrono sopra: la posizione del puntatore sceglie un punto di un segmento di inclinazione. Clicca per girarlo e leggere le novità; clicca la matrice per strapparla e ricevere il timbro.
Gesto e timeline
- la x del puntatore sceglie tilt, da 1,1 a 3,1 s (sinistra 1,6, centro 2,1, destra 2,6)
- un clic suona flip, da 3,1 a 4,25 s, il secondo lo riavvolge
- la matrice suona tear, da 4,25 a 5,8 s
- poi da 5,8 a 7,8 s in loop
Si cambia per nome
- headline-line-1..3, details-1/2
- pass-product-1/2, grid-1..4, testi della matrice
- feature-1..3-label, logo, pass-logo, product-image
- cordino, lamina e ogni livello (brand color)
Feature deck: una carta per clic
Tre novità come un mazzo di carte. Ogni clic o swipe lancia via la carta in cima con una piccola rincorsa; la successiva si raddrizza con un rimbalzo e disegna la sua illustrazione. La quarta carta è la call to action. La pagina mette in pausa la timeline in tre punti, ed è tutta qui l’interazione.
Gesto e timeline
- l’intro distribuisce il mazzo da 0 a 1,3 s
- la pagina si ferma a 1,3, 2,2 e 3,1 s
- ogni clic suona fino alla fermata dopo; un clic durante il lancio resta in coda
- dopo l’ultima carta da 3,1 a 4,8 s, poi da 4,8 a 7,8 s in loop
Si cambia per nome
- headline-line-1..3, subhead
- card-1..3: titolo, testo e piede
- cta-title-1/2, cta-label, cta-url, product-image
- le illustrazioni sono tracciati: si ridisegnano per ogni funzione
Un template, qualsiasi marchio
Ogni hero è stato generato tramite l’MCP di SVGator e resta un normale progetto SVGator. Tutto ciò che cambia con il marchio è un livello con un nome: un livello di testo per ogni riga, livelli immagine per il logo e per lo screenshot del prodotto, e ogni colore che segue il marchio ha (brand color) nel nome. Una nota accanto alla tela, fuori dall’artboard, elenca livelli e segmenti della timeline: la vedi nell’editor e non compare mai in un export.
La versione Harbor di ogni hero è un duplicato di quella Lumen, modificato da uno script che confronta i due set di contenuti e manda all’MCP solo le differenze, livello per livello:
- Ignition
- 34 modifichein 145 s
- Tear-open box
- 33 modifichein 85 s
- Event pass
- 37 modifichein 98 s
- Feature deck
- 31 modifichein 76 s
Decisioni chiave
I gesti sono segmenti della timeline.
Ogni hero è una sola timeline di SVGator divisa in segmenti con un nome. La pagina la fa solo partire, fermare, riavvolgere e saltare con il Player API, così l’animazione resta modificabile in SVGator e niente è animato due volte.
Ogni gesto rispetta la fisica del suo oggetto.
Un pulsante tenuto premuto torna indietro se lasci, una striscia strappata resta strappata, un pass girato si rigira. Prendere in prestito il comportamento dell’oggetto rende il gesto chiaro senza istruzioni.
Leggeri da modificare.
Le forme si riusano e si anima solo ciò che si muove: da circa 80 a 150 livelli per hero, da 330 a 380 KB con font e immagini incorporati, così i file si aprono bene nell’editor di SVGator e qui si caricano in fretta.