# Vídeo em loop perfeito: como fazer um que nunca salta

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

Um loop que salta a cada dez segundos é pior do que nenhum movimento. A solução não é um editor melhor; é um movimento desenhado para voltar a casa.

## The short version

- Um loop perfeito é um vídeo cujo último fotograma leva diretamente ao primeiro, para se poder repetir sem um salto visível.
- O movimento gerado fica em loop limpo quando tudo o que se move completa um número inteiro de ciclos na duração do vídeo.
- O soluço mais comum é um fotograma duplicado: o último fotograma deve ser o imediatamente anterior ao primeiro, não uma cópia dele.
- As imagens filmadas que não foram pensadas para loop podem ser corrigidas trocando as duas metades e fazendo uma transição cruzada na nova junção.
- Verifica um loop reproduzindo-o várias vezes em tamanho real e comparando o último fotograma com o primeiro.

Um **loop perfeito** é um vídeo cujo último fotograma leva diretamente ao primeiro, para se poder repetir para sempre sem ninguém ver onde começa. O segredo é que tudo no enquadramento tem de voltar a casa no momento exato: cada posição, cor, nível de luz e partícula acaba um passo antes de onde começou. Acerta nisso e um clip de dez segundos pode passar o dia inteiro.

Este guia explica porque saltam os loops, como desenhar movimento que regressa sozinho, como salvar imagens filmadas que não foram feitas para loop e como verificar a junção antes de publicar. Para o visual do próprio loop, vê os [fundos em gradiente animado](https://gradiently.design/pt-pt/guide/animated-gradient-background).

## Porque é que a maioria dos loops salta

Um salto na junção tem sempre uma causa específica, e cada uma tem uma solução específica. Ajuda dar nome àquela que estás a ver.

| Causa | O que vês | Solução |
| --- | --- | --- |
| O fim não coincide com o início | A cor ou a posição voltam atrás de repente | Torna o movimento periódico, ou faz uma transição cruzada |
| Fotograma duplicado | Um pequeno soluço ou pausa na junção | Renderiza o último fotograma um passo antes do primeiro |
| O movimento abranda até parar nas pontas | Um instante de imobilidade e depois movimento outra vez | Mantém a velocidade contínua na junção |
| Ruído ou partículas aleatórias que não se repetem | A textura ou os pontos saltam | Põe o ruído em loop, ou deixa as partículas estabilizar primeiro |
| Compressão forte | Um leve pulsar de desfocagem na junção | Exporta com uma qualidade mais alta |

A terceira causa é traiçoeira. Se animares de A para B e de volta com suavização nas duas pontas, o movimento abranda até parar na junção e o loop parece hesitar. A suavização pertence ao início e ao fim de um movimento único, não à junção de um loop. O guia sobre [easing](https://gradiently.design/pt-pt/guide/easing) explica a diferença.

## Desenhar movimento que fica em loop sozinho

Os loops mais limpos são feitos de movimento periódico: movimento que se repete por natureza, como um ponto a percorrer um círculo ou uma luz a crescer e a baixar. Se tudo o que se move completar um número inteiro de ciclos na duração do vídeo, o último fotograma alinha automaticamente com o primeiro. Os círculos, as ondas sinusoidais e as voltas completas de tom são todos periódicos.

```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 periódico para um loop de 10 segundos. Cada valor completa ciclos inteiros e, como `phase` para mesmo antes de 1, o fotograma 300 (uma cópia do fotograma 0) nunca é desenhado.

Esse último pormenor é o que evita o soluço. Se o teu último fotograma for idêntico ao primeiro, o leitor mostra essa imagem duas vezes seguidas em cada repetição. O último fotograma deve ser o imediatamente anterior ao primeiro.

- Fotograma 298: `linear-gradient(150deg, #0f172a 0%, #1d4ed8 52%, #22d3ee 100%)`
- Fotograma 299: o último: `linear-gradient(151deg, #0f172a 0%, #1d4ed8 51%, #22d3ee 100%)`
- Fotograma 0: o primeiro: `linear-gradient(152deg, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%)`
- Fotograma 1: `linear-gradient(153deg, #0f172a 0%, #1d4ed8 49%, #22d3ee 100%)`

Numa boa junção, cada fotograma difere do seguinte pelo mesmo pequeno passo. Não há nenhum em que a mudança seja maior, nem nenhum que se repita.

### Ruído, grão e partículas em loop

As texturas orgânicas são muitas vezes feitas de ruído, que por predefinição não se repete. O truque habitual é percorrer o ruído em círculo em vez de em linha reta, para que, ao fim de um loop, voltes ao mesmo ponto. Os sistemas de partículas são diferentes: a posição de cada partícula depende das anteriores. Correr a simulação durante um loop inteiro antes de gravar deixa as partículas assentar no seu ritmo, para que o fim gravado fique perto do início.

## Como pôr em loop imagens que não foram feitas para isso

Os clips filmados, como ondas, fumo ou nuvens, raramente acabam onde começam. A solução clássica funciona em qualquer editor de vídeo: leva a junção para o meio do clip, onde as imagens já são contínuas, e esconde o novo corte com uma transição cruzada.

1. **Divide o clip ao meio** Corta o clip em duas metades, A e B, num momento de movimento regular.
2. **Troca as metades** Põe B primeiro e A a seguir. O fim de A flui agora para o início de B, porque era um só momento contínuo no original, por isso o ponto de loop fica perfeito.
3. **Faz uma transição cruzada no novo meio** Onde B encontra A, sobrepõe-nos entre meio segundo e dois segundos e funde um no outro. As imagens suaves e texturadas escondem melhor uma transição cruzada.
4. **Apara para uma duração redonda** Aponta para um número inteiro de segundos, o que torna o loop fácil de sincronizar e de reutilizar.

> **Evita pontos de referência óbvios** Uma transição cruzada esconde bem a textura, mas não os objetos. Se um pássaro atravessar o enquadramento durante a fusão, as pessoas vão ver dois fantasmas. Escolhe um troço de imagens sem nada de marcante.

## Escolher a duração do loop

Os loops mais longos parecem menos repetitivos, mas são ficheiros maiores e precisam de mais movimento periódico para se manterem interessantes. Os loops curtos repetem-se muitas vezes, por isso o seu movimento tem de ser subtil o suficiente para não se tornar hipnótico. A 30 fotogramas por segundo, um loop de 10 segundos tem 300 fotogramas, que se dividem bem em metades, terços e quartos para os teus ciclos.

| Onde passa | Duração sugerida | Porquê |
| --- | --- | --- |
| Stories e publicações curtas | 5 a 10 segundos | Quem vê avança depressa; ficheiros pequenos |
| Reels e fundos de vídeo | 10 a 15 segundos | Espaço para um ciclo mais lento e calmo |
| Cabeçalho de site | 8 a 15 segundos | Curto o suficiente para manter o ficheiro leve |
| Ecrãs, expositores, fundos de ecrã | 15 a 30 segundos | As pessoas veem durante mais tempo, por isso as repetições têm de se notar menos |

Pontos de partida, não regras. O formato do ficheiro também conta; vê [GIF vs MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4).

## Como verificar a junção

Não avalies um loop vendo-o uma vez num editor. Vê-o como as pessoas o vão encontrar: a repetir, em tamanho real, durante mais tempo do que parece necessário. As junções que se escondem numa pré-visualização pequena aparecem muitas vezes num ecrã 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
```

Duas verificações rápidas com o ffmpeg. O último fotograma deve diferir do primeiro exatamente por um passo normal de movimento.

- Vê o ficheiro repetido quatro vezes em ecrã inteiro e olha só para a junção.
- Olha para as margens e os cantos, onde a deriva é mais visível.
- Observa o grão e as partículas separadamente da cor.
- Se vires um leve pulsar na junção, é compressão: exporta com uma qualidade mais alta.

Se fizeres loops na Gradiently, isto fica tratado por ti: cada loop exportado é construído para que o campo em movimento complete ciclos inteiros na duração que escolheres, de 5 a 30 segundos, e para que o fim encontre o início. É a mesma abordagem que seguirias em código, aplicada ao teu Mark. Os loops também dão bons [fundos de ecrã animados](https://gradiently.design/pt-pt/guide/live-wallpaper) e [fundos de vídeo para sites](https://gradiently.design/pt-pt/guide/video-background-website).

## FAQ

### O que é um loop perfeito?

É um vídeo ou uma animação cujo último fotograma leva diretamente ao primeiro, para se poder repetir continuamente sem um salto ou uma pausa visíveis.

### Porque é que o meu loop dá um soluço no fim?

Normalmente porque o último fotograma é uma cópia do primeiro, por isso a mesma imagem aparece duas vezes. Faz com que o último fotograma seja o imediatamente anterior ao primeiro.

### Como ponho em loop um vídeo que não foi filmado para isso?

Divide-o ao meio, troca as duas metades e faz uma transição cruzada onde elas agora se encontram. A junção original fica contínua e a transição cruzada esconde a nova.

### Quanto deve durar um vídeo em loop?

5 a 10 segundos para stories e publicações, 10 a 15 para reels e fundos web, e 15 a 30 para ecrãs e fundos de ecrã que as pessoas veem durante mais tempo.

### Porque é que há uma desfocagem no ponto de loop?

Normalmente é compressão, não a animação. Exportar com uma qualidade ou taxa de bits mais alta resolve-o.