Come registrare video di scorrimento fluidi per i template Framer

1. 1

   Pubblica su un indirizzo pubblico

   Pubblica il template, o la sua demo, sul suo indirizzo .framer.website o su un dominio personalizzato. Deve aprirsi in una finestra privata senza password.

2. 2

   Incolla l’URL e scegli Cattura dal vivo

   Incolla l’indirizzo nella home page. Alla voce Motore, scegli Cattura dal vivo. Invece di fare una panoramica su un’immagine ferma, fotografa la pagina a ogni posizione di scorrimento, così effetti di comparsa, trasformazioni allo scorrimento e sezioni fisse si comportano esattamente come nel browser.

3. 3

   Imposta il ritmo

   Da dodici a venti secondi vanno bene per la maggior parte delle home page dei template. Fluido è il movimento più sicuro; Pulsato avanza sezione per sezione fermandosi su ciascuna, e mette in risalto la struttura del template.

4. 4

   Fermati su ciò che lo vende

   Clicca sulla pagina nei punti in cui lo scorrimento deve fermarsi: l’hero, la griglia bento o delle funzioni, le testimonianze, i prezzi. Fino a 6 pause, da 0,5 a 5 secondi ciascuna. Attiva «Andata e ritorno» se il video torna su.

5. 5

   Mostra gli stati al passaggio

   Attiva il cursore, aggiungi un passaggio e clicca la card o il pulsante su cui deve posarsi. Il cursore ci arriva, l’effetto al passaggio parte e resta lì da 0,5 a 5 secondi prima di proseguire. Otto stili di cursore, da macOS a un semplice punto.

6. 6

   Esporta le versioni che ti servono

   Un MP4 in 16:9 a 1080p o 1440p per la scheda del marketplace, poi cambia il dispositivo in Mobile ed esporta una versione in 9:16 o 4:5 del layout per telefono per X, Instagram o TikTok.

Panoramica statica legge la pagina una volta e ci fa scorrere sopra un’inquadratura. È veloce e perfettamente regolare, ma tutto ciò che si anima allo scorrimento resta congelato nello stato in cui si trovava quando la pagina è stata letta. Attiva «Assesta le animazioni» e gli effetti di ingresso vengono prima portati al loro stato finale, così niente resta a metà dissolvenza. Cattura dal vivo riproduce gli effetti davvero. Il rendering richiede molto più tempo e aggiunge 13 crediti all’esportazione.

• Usa Cattura dal vivo quando il movimento fa parte di ciò che vendi, come accade per la maggior parte dei template Framer.
• Usa Panoramica statica con «Assesta le animazioni» per le bozze veloci, per le pagine le cui animazioni sono solo di ingresso o per la versione mobile, dove lo spazio sullo schermo è poco.

• Una cornice del browser. Safari o Chrome, chiara o scura, così l’anteprima si riconosce subito come un sito web.
• Uno sfondo. Margine attorno alla finestra con un colore, una sfumatura o uno dei 36 sfondi predefiniti. Angoli arrotondati e un’ombra morbida la fanno sembrare una foto di prodotto più che una cattura dello schermo.
• Chiaro e scuro. Se il template segue il tema del sistema, forza Chiaro o Scuro in Schema di colori ed esportane una versione per ciascuno.
• Un primo fotogramma pulito. Resta fermo un secondo sull’hero prima che lo scorrimento inizi. Marketplace e app social usano spesso il primo fotogramma come miniatura.