# Video in loop senza stacchi: come crearne uno che non salta mai

[Canonical HTML page](https://gradiently.design/it/guide/seamless-loop-video)

Un loop che salta una volta ogni dieci secondi è peggio di nessun movimento. La soluzione non è un editor migliore: è un movimento progettato per tornare a casa.

## The short version

- Un loop senza stacchi è un video il cui ultimo fotogramma porta dritto al primo, così può ripetersi senza un salto visibile.
- Il movimento generato va in loop in modo pulito quando tutto ciò che si muove completa un numero intero di cicli nella durata del video.
- Lo scatto più comune è un fotogramma duplicato: l’ultimo fotogramma deve essere quello subito prima del primo, non una sua copia.
- Le riprese non pensate per andare in loop si possono sistemare scambiando le due metà e inserendo una dissolvenza incrociata nel nuovo punto di giunzione.
- Controlla un loop riproducendolo più volte a dimensione piena e confrontando l’ultimo fotogramma con il primo.

Un **loop senza stacchi** è un video il cui ultimo fotogramma porta dritto al primo, così può ripetersi all’infinito senza che nessuno veda dove inizia. Il segreto è che tutto nell’inquadratura deve tornare a casa nel momento esatto: ogni posizione, colore, livello di luce e particella finisce un passo prima del punto da cui era partita. Se ci riesci, un clip di dieci secondi può girare tutto il giorno.

Questa guida spiega perché i loop saltano, come progettare un movimento che torna da solo, come recuperare riprese non pensate per il loop e come controllare il punto di giunzione prima di pubblicare. Per l’aspetto del loop in sé, leggi [sfondi con gradiente animato](https://gradiently.design/it/guide/animated-gradient-background).

## Perché la maggior parte dei loop salta

Un salto nel punto di giunzione ha sempre una causa precisa, e ognuna ha una soluzione precisa. Aiuta dare un nome a quella che hai davanti.

| Causa | Cosa vedi | Soluzione |
| --- | --- | --- |
| La fine non corrisponde all’inizio | Colore o posizione tornano indietro di scatto | Rendi periodico il movimento, o usa una dissolvenza incrociata |
| Fotogramma duplicato | Un piccolo scatto o una pausa alla giunzione | Genera l’ultimo fotogramma un passo prima del primo |
| Il movimento rallenta fino a fermarsi alle estremità | Un attimo di immobilità, poi di nuovo movimento | Mantieni la velocità continua attraverso la giunzione |
| Rumore casuale o particelle che non si ripetono | La texture o i puntini saltano | Metti in loop il rumore, o lascia prima assestare le particelle |
| Compressione pesante | Un leggero impulso di sfocatura alla giunzione | Esporta a una qualità più alta |

La terza causa è subdola. Se animi da A a B e ritorno con un easing a entrambe le estremità, il movimento rallenta fino a fermarsi alla giunzione e il loop sembra esitare. L’easing va all’inizio e alla fine di un movimento singolo, non alla giunzione di un loop. L’[easing](https://gradiently.design/it/guide/easing) spiega la differenza.

## Progettare un movimento che va in loop da solo

I loop più puliti sono fatti di movimento periodico: un movimento che per natura si ripete, come un punto che percorre un cerchio o una luce che cresce e cala. Se ogni elemento in movimento completa un numero intero di cicli nella durata del video, l’ultimo fotogramma si allinea automaticamente con il primo. Cerchi, onde sinusoidali e giri completi di tinta sono tutti periodici.

```js
const fps = 30
const seconds = 10
const frames = fps * seconds            // 300 frames, numbered 0 to 299

for (let i = 0; i < frames; i++) {
  const phase = i / frames              // 0 up to, but never reaching, 1
  const turn = phase * Math.PI * 2      // one full turn per loop

  const x = Math.cos(turn) * 40         // drift in a circle, 40 px across
  const y = Math.sin(turn) * 40
  const hue = 280 + Math.sin(turn * 2) * 20   // two gentle hue swings per loop
  const glow = 0.5 + 0.5 * Math.sin(turn)     // light breathes once per loop

  drawFrame(i, { x, y, hue, glow })     // your renderer
}
```

Movimento periodico per un loop di 10 secondi. Ogni valore completa cicli interi, e poiché `phase` si ferma appena prima di 1, il fotogramma 300 (una copia del fotogramma 0) non viene mai disegnato.

È quest’ultimo dettaglio a evitare lo scatto. Se l’ultimo fotogramma è identico al primo, il player mostra quell’immagine due volte di fila a ogni ripetizione. L’ultimo fotogramma deve essere quello subito prima del primo.

- Fotogramma 298: `linear-gradient(150deg, #0f172a 0%, #1d4ed8 52%, #22d3ee 100%)`
- Fotogramma 299: l’ultimo: `linear-gradient(151deg, #0f172a 0%, #1d4ed8 51%, #22d3ee 100%)`
- Fotogramma 0: il primo: `linear-gradient(152deg, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%)`
- Fotogramma 1: `linear-gradient(153deg, #0f172a 0%, #1d4ed8 49%, #22d3ee 100%)`

In una buona giunzione, ogni fotogramma differisce dal successivo dello stesso piccolo passo. Non c’è un fotogramma in cui il cambiamento è più grande, né uno che si ripete.

### Mettere in loop rumore, grana e particelle

Le texture organiche sono spesso fatte di rumore, che di base non si ripete. Il trucco standard è muoversi nel rumore lungo un cerchio invece che in linea retta, così dopo un loop sei di nuovo nello stesso punto. I sistemi di particelle sono diversi: la posizione di ogni particella dipende da quelle precedenti. Far girare la simulazione per un intero loop prima di registrare permette alle particelle di assestarsi nel loro ritmo, così la fine registrata resta vicina all’inizio.

## Come mettere in loop riprese non pensate per il loop

I clip girati, come onde, fumo o nuvole, raramente finiscono dove iniziano. La soluzione classica funziona in qualsiasi editor video: sposta la giunzione nel mezzo del clip, dove la ripresa è già continua, e nascondi il nuovo taglio con una dissolvenza incrociata.

1. **Dividi il clip a metà** Taglia il clip in due metà, A e B, in un momento con un movimento costante.
2. **Scambia le metà** Metti prima B e poi A. La fine di A ora scorre nell’inizio di B, perché nell’originale erano un unico momento continuo, quindi il punto del loop è senza stacchi.
3. **Dissolvi il nuovo punto centrale** Dove B incontra A, sovrapponile da mezzo secondo a due secondi e sfuma l’una nell’altra. Le riprese morbide e materiche nascondono meglio una dissolvenza incrociata.
4. **Taglia a una durata tonda** Punta a un numero intero di secondi, che rende il loop facile da sincronizzare e da riusare.

> **Evita i punti di riferimento evidenti** Una dissolvenza incrociata nasconde bene la texture ma non gli oggetti. Se un uccello attraversa l’inquadratura durante la dissolvenza, si vedranno due fantasmi. Scegli un tratto di ripresa senza nulla di riconoscibile.

## Scegliere la durata del loop

I loop più lunghi sembrano meno ripetitivi, ma sono file più pesanti e richiedono più movimento periodico per restare interessanti. I loop brevi si ripetono spesso, quindi il loro movimento deve essere abbastanza sottile da non diventare ipnotico. A 30 fotogrammi al secondo, un loop di 10 secondi è di 300 fotogrammi, che si dividono bene in metà, terzi e quarti per i tuoi cicli.

| Dove viene riprodotto | Durata consigliata | Perché |
| --- | --- | --- |
| Storie e post brevi | Da 5 a 10 secondi | Chi guarda passa oltre in fretta; file leggeri |
| Reel e sfondi video | Da 10 a 15 secondi | Spazio per un ciclo più lento e calmo |
| Hero di un sito web | Da 8 a 15 secondi | Abbastanza breve da mantenere leggero il file |
| Schermi, display, sfondi | Da 15 a 30 secondi | Le persone guardano più a lungo, quindi le ripetizioni devono notarsi meno |

Punti di partenza, non regole. Conta anche il formato del file; leggi [GIF o MP4](https://gradiently.design/it/guide/gif-vs-mp4).

## Come controllare la giunzione

Non giudicare un loop guardandolo una volta in un editor. Guardalo come lo incontreranno le persone: in ripetizione, a dimensione piena, più a lungo di quanto sembri necessario. Le giunzioni che si nascondono in un’anteprima piccola spesso si vedono su uno schermo grande.

```bash
# Play the loop four times in a row as one file, to watch the joins
ffmpeg -stream_loop 3 -i loop.mp4 -c copy loop-x4.mp4

# Save the first and last frames as images to compare side by side
ffmpeg -i loop.mp4 -vf "select=eq(n\,0)" -frames:v 1 first.png
ffmpeg -sseof -0.5 -i loop.mp4 -update 1 last.png
```

Due controlli rapidi con ffmpeg. L’ultimo fotogramma deve differire dal primo esattamente di un normale passo di movimento.

- Guarda il file ripetuto quattro volte a schermo intero e osserva solo la giunzione.
- Guarda i bordi e gli angoli, dove la deriva si nota di più.
- Osserva la grana e le particelle separatamente dal colore.
- Se vedi un leggero impulso alla giunzione, è la compressione: esporta a una qualità più alta.

Se crei loop in Gradiently, tutto questo è gestito per te: ogni loop esportato è costruito in modo che il campo in movimento completi cicli interi nella durata che scegli, da 5 a 30 secondi, e che la fine si unisca all’inizio. È lo stesso approccio che useresti nel codice, applicato al tuo Mark. I loop funzionano bene anche come [sfondi animati](https://gradiently.design/it/guide/live-wallpaper) e come [sfondi video per siti web](https://gradiently.design/it/guide/video-background-website).

## FAQ

### Che cos’è un loop senza stacchi?

È un video o un’animazione il cui ultimo fotogramma porta direttamente al primo, così può ripetersi di continuo senza salti o pause visibili.

### Perché il mio loop ha uno scatto alla fine?

Di solito perché l’ultimo fotogramma è una copia del primo, quindi la stessa immagine compare due volte. Fai in modo che l’ultimo fotogramma sia quello subito prima del primo.

### Come metto in loop un video che non è stato girato per il loop?

Dividilo a metà, scambia le due metà e inserisci una dissolvenza incrociata dove ora si incontrano. La giunzione originale diventa continua, e la dissolvenza nasconde quella nuova.

### Quanto deve durare un video in loop?

Da 5 a 10 secondi per storie e post, da 10 a 15 per reel e sfondi web, e da 15 a 30 per schermi e sfondi che le persone guardano più a lungo.

### Perché c’è una sfocatura nel punto del loop?

Di solito è la compressione, non l’animazione. Esportare a una qualità o a un bitrate più alti la elimina.