Video in loop: come i brand creano clip che non finiscono mai

Un video in loop è una clip breve costruita per ripetersi all’infinito senza che nessuno veda dove ricomincia. Per un brand è uno dei formati più utili: un solo file può scorrere dietro il titolo di un sito, su uno schermo vicino alla cassa, sotto un brano su Spotify o dietro la schermata di attesa di una diretta. Il mestiere è facile da dire. Fai in modo che l’ultimo fotogramma porti dritto al primo, tieni il movimento lento e continuo, e non mettere mai nella clip un evento isolato, perché qualsiasi cosa accada una volta sola diventa il segnale del riavvio.

Dove i brand usano un video in loop

I loop vanno bene ovunque la gente arrivi in un momento a caso e resti per un tempo imprevedibile. Nessuno comincia a guardare una vetrina al secondo zero, quindi una storia con un inizio e una fine ha la forma sbagliata. Un loop non ha un inizio, ed è proprio questo il punto.

Ognuno di questi luoghi ha le sue regole su dimensioni e audio. Sfondi video per siti web tratta il caso web nel dettaglio, mentre sfondi video ambient si occupa dei loop lunghi e calmi che girano su schermi e dirette.

Cosa rende un loop infinito

Tecnicamente a un loop basta che la fine incontri l’inizio. Per la percezione serve di più. Le persone notano la ripetizione grazie ai punti di riferimento: il momento in cui una macchia luminosa supera un angolo, il fotogramma in cui entra una forma, un guizzo di grana che cade sempre nello stesso punto. Elimina i punti di riferimento e una clip di dodici secondi può sembrare durare ore.

• Movimento continuo. Derive, rotazioni e panoramiche lente che non si fermano mai. Fermarsi e ripartire crea un ritmo che l’occhio sa contare.
• Cicli interi. Tutto ciò che si muove completa un numero intero di giri o passaggi nella durata della clip, così finisce esattamente dove era cominciato.
• Più livelli a velocità correlate. Uno sfondo che compie un ciclo e un riflesso che ne compie due nascondono a vicenda la propria ripetizione.
• Nessun evento isolato. Nessun lampo, stacco, firma del logo o oggetto che compare una volta sola. Se accade una volta, segna il riavvio.
• Parole ferme. Un testo che entra in animazione rientrerà a ogni loop. In un video in loop, lascia che le parole siano semplicemente lì.

Il dettaglio fotogramma per fotogramma di una giunzione pulita, compreso l’ultimo fotogramma duplicato che causa la maggior parte degli scatti, è spiegato in video loop senza stacchi.

Quanto deve durare un video in loop

La durata dipende dalla velocità e da quanto a lungo la gente guarderà. Un loop che qualcuno guarda per tre secondi può essere breve. Un loop che gira su una parete tutto il pomeriggio deve essere abbastanza lungo, e abbastanza lento, perché la ripetizione non diventi mai evidente. Clip più lunghe significano file più pesanti, quindi bilancia le due cose.

Quanto deve durare un video in loop affronta questo compromesso luogo per luogo, tenendo d’occhio il peso dei file.

Come creare un video in loop a partire da un design

1. 1

   Parti dal luogo in cui verrà riprodotto

   Scegli prima le dimensioni esatte: 1920×1080 per uno schermo orizzontale o un hero, 1080×1920 per storie, Reel e schermi verticali, 1080×1350 per un post nel feed.

2. 2

   Scegli un solo livello in movimento

   Di solito lo sfondo. Un gradiente o un materiale in movimento è l’ideale, perché non ha bordi che tradiscano il loop.

3. 3

   Tieni le parole ferme e calme

   Metti il testo dove lo sfondo è più quieto. Se deve proprio animarsi, tieni il movimento dentro lo sfondo.

4. 4

   Imposta la durata su cicli interi

   Assicurati che ogni movimento completi un numero intero di cicli nella clip, così l’ultimo fotogramma scorre nel primo.

5. 5

   Esporta come video, poi guardalo girare

   Esporta in MP4, o WebM per il web, e riproducilo in ripetizione a schermo intero per almeno un minuto. Correggi quello che noti due volte.

Qui entra in gioco Gradiently. Ogni Mark è un gradiente vivo con uno sfondo materico che già si muove, quindi con Pro un design costruito su di esso si esporta come loop senza stacchi da 5 a 30 secondi senza che tu animi nulla. Poiché non esistono due Mark uguali, il loop nella tua vetrina non sarà lo stesso sfondo da archivio del negozio accanto.

Mettere un video in loop su un sito web

I browser avviano in automatico solo i video muti, e sui telefoni serve playsinline per tenerlo dentro la pagina. Aggiungi un’immagine poster perché qualcosa appaia prima del caricamento del video, e proponi prima il WebM, più leggero, con l’MP4 come alternativa.

<video class="hero-loop" autoplay muted loop playsinline
       poster="hero-first-frame.jpg" width="1920" height="1080">
  <source src="hero-loop.webm" type="video/webm">
  <source src="hero-loop.mp4" type="video/mp4">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-loop { display: none; }
    .hero { background: url(hero-first-frame.jpg) center / cover; }
  }
</style>

Quest’ultima regola conta. Per alcune persone il movimento costante è fonte di distrazione o di disagio fisico, e il loro sistema operativo lo comunica al browser. Prefers reduced motion spiega come rispettarlo bene.