Da HTML a video
Trasforma animazioni web e codice Canvas e Three.js in MP4
Parti da un modello
- Finestra live Finestra arrotondata con badge LIVE e nome; l'audio del video va sulla timeline
- Media incorniciato Finestra con bordo bianco luminoso ed etichetta; entra in scala e può zoomare su una zona
- Parete di foto Foto verticali appaiono affiancate, ognuna con didascalia
- Trittico di primi piani Immagini affiancate a tutto campo, ciascuna con etichetta, numero e titolo del capitolo in basso
- Galleria con striscia Le miniature in basso si accendono a turno e l'immagine grande segue
- Storyboard e principale Colonna di riquadri a sinistra, finestra principale con etichetta a destra
- Spiegazione divisa Testo grande a sinistra (seconda riga in colore), media a destra, segno sulla timeline sotto
- Titolo riempito di immagine Il tuo video o immagine dentro lettere giganti, con occhiello e sottotitolo
- Mockup telefono Il tuo video in una cornice di telefono che fluttua
- Badge d'angolo Logo e nome fissi in un angolo
- Sfumatura granulosa Sfumatura lenta da verde acqua ad arancio con grana — mettila in fondo come sfondo
- Titolo pop Titolo grande con sottolineatura e sottotitolo
- Parola per parola Le parole compaiono una alla volta a ritmo
- Crescita dei dati Le barre crescono mentre il numero sale
- Sottopancia Sottopancia con nome e ruolo
- Lampo di luce Un fascio di luce attraversa l’immagine
- Conto alla rovescia 3, 2, 1 compaiono mentre l’anello si svuota
- Macchina da scrivere Scrive lettera per lettera con cursore lampeggiante
- Anello di avanzamento L’anello si riempie fino alla percentuale e il numero sale
- Cerchio evidenziatore Un cerchio a mano evidenzia ciò che conta
- Forma 3D rotante Un nodo metallico ruota lentamente (Three.js)
- Barre musicali Le barre saltano con la musica della timeline e lampeggiano sui battiti
- Schede sottotitoli I sottotitoli del tratto compaiono uno per scheda con barra d’accento; nascondi la traccia per lasciare solo le schede
- Titolo evidenziato Una barra evidenziatore attraversa un fondo crema mentre cadono lettere grandi
- Parole a impatto Una parola per schermata entra con forza mentre blocchi nero, giallo e crema scorrono in diagonale
- Scheda domanda Piccola etichetta e due righe grandi, la seconda su una fascia vivace
- Etichette adesive Strisce di carta crema entrano inclinate (separa con |)
- Conto alla rovescia a blocchi Numeri enormi scendono, ognuno spinge un nuovo blocco di colore
- Etichette a pillola Titolo grande, una fila di etichette scure a pillola che salgono una dopo l’altra e una conclusione evidenziata in basso
- Schede di stato Una colonna di schede a sinistra scorre per mettere a fuoco ciascuna; a destra un confronto in grande
- Tabella dei tag Un pannello scuro che elenca «tag → significato» riga per riga, con i tag in carattere monospaziato
- Scheda citazione Una piccola etichetta in alto a sinistra e una lunga citazione che appare riga per riga
Con un clic si apre l’editor con l’animazione già aggiunta. Per i modelli con slot multimediali, trascina un video o un’immagine sulla scheda, oppure tocca «Usa i miei file», e all’apertura dell’editor sarà già al suo posto. I file restano sul tuo dispositivo; non si carica nulla.
Incolla un’animazione Canvas, SVG, GSAP o Three.js: disegnata fotogramma per fotogramma sul video, esportata in MP4 o GIF. Gratis nel browser, senza filigrana.
Incolla il codice di un’animazione web o importa un file .html e diventa una clip animata sulla timeline: sfondo trasparente, sovrapposta al tuo video o alla tua immagine, e come ogni altra clip puoi spostarla, ridimensionarla, regolarne l’opacità, aggiungere fotogrammi chiave e animazioni di entrata e uscita.
L’editor la disegna fotogramma per fotogramma in base al tempo, invece di registrare lo schermo: lo stesso istante dà sempre lo stesso fotogramma, quindi l’anteprima è esattamente ciò che esporti. Math.random, Date e requestAnimationFrame nel codice vengono sostituiti da un orologio deterministico; GSAP e Three.js sono già integrati, senza bisogno di script esterni.
Il codice gira in una sandbox isolata senza accesso alla rete, quindi immagini e font esterni non si caricano: se servono, inseriscili inline con indirizzi data:. I parametri dichiarati dall’animazione stessa (testo, colori, valori) compaiono nel pannello dei parametri a destra; dopo le modifiche esporti subito in MP4 o GIF.
Domande frequenti
- Quali stili di codice sono supportati?
- Quattro stili comuni funzionano così come sono: definire window.__seek(t) per disegnare un fotogramma dato il tempo in secondi; creare una timeline GSAP in pausa e metterla in window.__timelines; posizionare una scena Three.js in base al tempo dentro __seek e poi renderizzarla; oppure un normale ciclo requestAnimationFrame. Se la pagina contiene un solo canvas viene catturato direttamente, altrimenti l’intera pagina (SVG, CSS, testo) viene disegnata come un fotogramma.
- Posso usare librerie da una CDN?
- GSAP (con i plugin CustomEase, MotionPath, MorphSVG, DrawSVG e SplitText) e Three.js sono già integrati, e gli indirizzi CDN che nel codice puntano a loro vengono sostituiti automaticamente con la copia integrata. Altre librerie esterne non si caricano, perché la sandbox non può accedere alla rete.
- Il video esportato ha l’audio?
- L’animazione di per sé non ha audio, e l’audio riprodotto dal codice non viene registrato. Puoi aggiungere a parte musica o voce fuori campo sulla timeline ed esportarle insieme all’animazione.
- E se il codice dà errore?
- In cima all’anteprima e sulla clip compare un avviso di errore, e il messaggio originale è visibile nella finestra del codice; fai clic su “Chiedi all’IA di correggere” e l’IA legge il codice, lo corregge e poi ricontrolla il risultato. Finché non è corretto, l’anteprima resta sull’ultimo fotogramma valido e le altre clip non ne risentono.
- Il mio codice viene caricato online?
- No. Il codice viene salvato con il progetto nel tuo browser, e rendering ed esportazione avvengono sul tuo dispositivo. Viene caricato insieme al progetto solo se scegli tu di salvare il progetto nel cloud.