# Vídeo em loop perfeito: como fazer um que nunca dá salto

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

Um loop que dá um salto a cada dez segundos é pior do que nenhum movimento. A solução não é um editor melhor; é um movimento criado para voltar ao ponto de partida.

## The short version

- Um loop perfeito é um vídeo cujo último quadro leva direto ao primeiro, para que possa se repetir sem nenhum salto visível.
- Movimento gerado forma um loop limpo quando tudo o que se move completa um número inteiro de ciclos dentro da duração do vídeo.
- O tropeço mais comum é um quadro duplicado: o último quadro deve ser o imediatamente anterior ao primeiro, e não uma cópia dele.
- Uma filmagem que não foi pensada para loop pode ser corrigida trocando as suas duas metades e fazendo uma transição cruzada na nova emenda.
- Confira um loop tocando-o várias vezes seguidas em tamanho real e comparando o último quadro com o primeiro.

Um **loop perfeito** é um vídeo cujo último quadro leva direto ao primeiro, para que possa se repetir para sempre sem que ninguém veja onde ele começa. O segredo é que tudo no quadro precisa voltar para casa no momento exato: cada posição, cor, nível de luz e partícula termina um passo antes de onde começou. Acerte isso e um clipe de dez segundos pode tocar o dia inteiro.

Este guia explica por que os loops dão salto, como criar movimento que volta sozinho, como salvar uma filmagem que não foi feita para loop e como conferir a emenda antes de publicar. Para o visual do loop em si, veja [fundos gradientes animados](https://gradiently.design/pt-br/guide/animated-gradient-background).

## Por que a maioria dos loops dá salto

Um salto na emenda sempre tem uma causa específica, e cada uma tem uma solução específica. Ajuda dar nome àquela que você está vendo.

| Causa | O que você vê | Solução |
| --- | --- | --- |
| O fim não bate com o começo | A cor ou a posição volta de repente | Torne o movimento periódico, ou faça uma transição cruzada |
| Quadro duplicado | Um pequeno tropeço ou pausa na emenda | Renderize o último quadro um passo antes do primeiro |
| O movimento desacelera até parar nas pontas | Um instante parado, depois movimento de novo | Mantenha a velocidade contínua na emenda |
| Ruído ou partículas aleatórias que não se repetem | A textura ou os pontinhos saltam | Faça o ruído em loop, ou deixe as partículas se assentarem primeiro |
| Compressão pesada | Um leve pulso de desfoque na emenda | Exporte com qualidade maior |

A terceira causa é traiçoeira. Se você anima de A até B e volta com suavização nas duas pontas, o movimento desacelera até parar na emenda e o loop parece hesitar. A suavização pertence ao começo e ao fim de um movimento único, não à emenda de um loop. O guia de [easing](https://gradiently.design/pt-br/guide/easing) explica a diferença.

## Como criar movimento que forma loop sozinho

Os loops mais limpos são feitos de movimento periódico: movimento que se repete por natureza, como um ponto dando a volta num círculo ou uma luz que cresce e diminui. Se tudo o que se move completa um número inteiro de ciclos dentro da duração do vídeo, o último quadro se alinha com o primeiro automaticamente. Círculos, ondas senoidais e voltas completas de matiz 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 logo antes de 1, o quadro 300 (uma cópia do quadro 0) nunca é desenhado.

Esse último detalhe é o que evita o tropeço. Se o seu último quadro é idêntico ao primeiro, o player mostra essa imagem duas vezes seguidas a cada repetição. O último quadro deve ser o imediatamente anterior ao primeiro.

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

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

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

Texturas orgânicas costumam ser feitas de ruído, que por padrão não se repete. O truque padrão é percorrer o ruído em círculo, e não em linha reta, para que depois de um loop você volte ao mesmo ponto dele. Sistemas de partículas são diferentes: a posição de cada partícula depende das anteriores. Rodar a simulação por um loop inteiro antes de gravar deixa as partículas entrarem no ritmo, para que o fim gravado fique perto do começo.

## Como fazer loop com uma filmagem que não foi feita para isso

Clipes filmados, como ondas, fumaça ou nuvens, raramente terminam onde começam. A solução clássica funciona em qualquer editor de vídeo: leve a emenda para o meio do clipe, onde a filmagem já é contínua, e esconda o novo corte com uma transição cruzada.

1. **Divida o clipe no meio** Corte o clipe em duas metades, A e B, num momento de movimento constante.
2. **Troque as metades** Coloque B primeiro e A depois. O fim de A agora flui para o começo de B, porque aquele era um momento contínuo no original, então o ponto do loop fica perfeito.
3. **Faça a transição cruzada no novo meio** Onde B encontra A, sobreponha os dois por meio segundo a dois segundos e funda um no outro. Filmagens suaves e cheias de textura escondem melhor uma transição cruzada.
4. **Corte numa duração redonda** Mire num número inteiro de segundos, o que torna o loop fácil de cronometrar e de reutilizar.

> **Evite elementos marcantes** Uma transição cruzada esconde bem a textura, mas não os objetos. Se um pássaro cruza o quadro durante a fusão, as pessoas vão ver dois fantasmas. Escolha um trecho da filmagem sem nada que chame atenção.

## Como escolher a duração do loop

Loops mais longos parecem menos repetitivos, mas geram arquivos maiores e precisam de mais movimento periódico para continuar interessantes. Loops curtos se repetem com frequência, então o movimento deve ser sutil o bastante para não ficar hipnótico. A 30 quadros por segundo, um loop de 10 segundos tem 300 quadros, que se dividem direitinho em metades, terços e quartos para os seus ciclos.

| Onde toca | Duração sugerida | Por quê |
| --- | --- | --- |
| Stories e posts curtos | 5 a 10 segundos | As pessoas passam rápido; arquivos pequenos |
| Reels e vídeos de fundo | 10 a 15 segundos | Espaço para um ciclo mais lento e calmo |
| Banner principal de site | 8 a 15 segundos | Curto o bastante para manter o arquivo leve |
| Telas, displays, papéis de parede | 15 a 30 segundos | As pessoas olham por mais tempo, então as repetições precisam ser menos perceptíveis |

Pontos de partida, não regras. O formato do arquivo também importa; veja [GIF ou MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4).

## Como conferir a emenda

Não avalie um loop assistindo uma vez num editor. Assista do jeito que as pessoas vão encontrá-lo: repetindo, em tamanho real, por mais tempo do que parece necessário. Emendas que se escondem numa prévia pequena muitas vezes aparecem numa tela 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 conferências rápidas com ffmpeg. O último quadro deve diferir do primeiro por exatamente um passo normal de movimento.

- Assista ao arquivo repetido quatro vezes em tela cheia e olhe só para a emenda.
- Olhe as bordas e os cantos, onde a deriva é mais visível.
- Observe o grão e as partículas separadamente da cor.
- Se você vir um leve pulso na emenda, é compressão: exporte com qualidade maior.

Se você faz loops no Gradiently, isso já é resolvido para você: todo loop exportado é construído para que o campo em movimento complete ciclos inteiros dentro da duração que você escolhe, de 5 a 30 segundos, e o fim encontre o começo. É a mesma abordagem que você usaria em código, aplicada ao seu Mark. Loops também dão ótimos [papéis de parede animados](https://gradiently.design/pt-br/guide/live-wallpaper) e [vídeos de fundo para sites](https://gradiently.design/pt-br/guide/video-background-website).

## FAQ

### O que é um loop perfeito?

É um vídeo ou uma animação cujo último quadro leva direto ao primeiro, para que possa se repetir continuamente sem salto nem pausa visível.

### Por que o meu loop tropeça no final?

Normalmente porque o último quadro é uma cópia do primeiro, então a mesma imagem aparece duas vezes. Faça do último quadro o imediatamente anterior ao primeiro.

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

Divida-o no meio, troque as duas metades e faça uma transição cruzada onde elas agora se encontram. A emenda original fica contínua, e a transição cruzada esconde a nova.

### Qual deve ser a duração de um vídeo em loop?

De 5 a 10 segundos para stories e posts, de 10 a 15 para reels e fundos de site, e de 15 a 30 para telas e papéis de parede que as pessoas olham por mais tempo.

### Por que aparece um desfoque no ponto do loop?

Normalmente é compressão, não a animação. Exportar com qualidade ou taxa de bits maior resolve.