Vídeo em loop: como as marcas fazem clipes que parecem não ter fim

Um vídeo em loop é um clipe curto feito para se repetir para sempre sem que ninguém veja onde ele recomeça. Para marcas, é um dos formatos mais úteis que existem: um único arquivo pode rodar atrás do título de um site, numa tela perto do caixa, sob uma música no Spotify ou atrás da tela de espera de uma live. O ofício é simples de explicar. Faça o último quadro levar direto ao primeiro, mantenha o movimento lento e contínuo, e nunca coloque um evento isolado no clipe, porque tudo que acontece uma vez vira um marcador do recomeço.

Onde as marcas usam vídeo em loop

Loops servem para qualquer lugar onde as pessoas chegam num momento aleatório e ficam por um tempo indefinido. Ninguém começa a olhar uma vitrine no segundo zero, então uma história com começo e fim é o formato errado. Um loop não tem começo, e é exatamente essa a ideia.

Cada um desses lugares tem regras próprias de tamanho e som. Vídeo de fundo em sites cobre o caso da web em detalhe, e fundos de vídeo ambiente trata dos loops longos e calmos que rodam em telas e lives.

O que faz um loop parecer infinito

Tecnicamente, um loop só precisa que o fim encontre o começo. Na percepção, precisa de mais. As pessoas notam repetição por pontos de referência: o momento em que uma mancha clara passa por um canto, o quadro em que uma forma entra, um brilho de granulado que sempre cai no mesmo lugar. Tire os pontos de referência e um clipe de doze segundos pode parecer durar horas.

• Movimento contínuo. Derivas, rotações e panorâmicas lentas que nunca param. Parar e recomeçar cria uma batida que o olho consegue contar.
• Ciclos inteiros. Tudo que se move completa um número inteiro de voltas ou passagens na duração do clipe, então termina exatamente onde começou.
• Várias camadas em velocidades relacionadas. Um fundo que dá uma volta e um brilho que dá duas disfarçam a repetição um do outro.
• Nenhum evento isolado. Nenhum flash, corte, vinheta de logo ou objeto que aparece uma vez. Se acontece uma vez, marca o recomeço.
• Palavras paradas. Um texto que entra animado vai entrar animado de novo a cada loop. Num vídeo em loop, deixe as palavras simplesmente estarem lá.

O detalhe quadro a quadro de uma emenda limpa, incluindo o último quadro duplicado que causa a maioria dos engasgos, está em vídeo em loop perfeito.

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

A duração depende da velocidade e de quanto tempo as pessoas vão olhar. Um loop que alguém vê de relance por três segundos pode ser curto. Um loop que roda numa parede a tarde inteira precisa ser longo o bastante, e lento o bastante, para que a repetição nunca fique óbvia. Clipes mais longos significam arquivos maiores, então equilibre as duas coisas.

Qual a duração ideal de um loop de vídeo analisa essa escolha lugar por lugar, de olho no tamanho dos arquivos.

Como fazer um vídeo em loop a partir de um design

1. 1

   Comece pelo lugar onde ele vai rodar

   Escolha o tamanho exato primeiro: 1920×1080 para uma tela horizontal ou o topo do site, 1080×1920 para stories, Reels e telas verticais, 1080×1350 para um post no feed.

2. 2

   Escolha uma camada em movimento

   Normalmente o fundo. Um gradiente ou material em movimento é ideal, porque não tem bordas que entreguem o loop.

3. 3

   Mantenha as palavras paradas e calmas

   Coloque o texto onde o fundo é mais tranquilo. Se precisar de animação, mantenha o movimento dentro do fundo.

4. 4

   Ajuste a duração a ciclos inteiros

   Garanta que cada movimento complete um número inteiro de ciclos no clipe, para que o último quadro flua para o primeiro.

5. 5

   Exporte como vídeo e assista em loop

   Exporte em MP4, ou WebM para a web, e assista em repetição no tamanho real por pelo menos um minuto. Corrija tudo que você notar duas vezes.

É aqui que o Gradiently entra. Todo Mark é um fundo vivo de gradiente e material que já se move, então, com o Pro, um design feito sobre ele é exportado como um loop perfeito de 5 a 30 segundos sem que você precise animar nada. Como não há dois Marks iguais, o loop da sua vitrine não vai ser o mesmo fundo de banco de imagens da loja ao lado.

Como colocar um vídeo em loop num site

Os navegadores só reproduzem automaticamente vídeos sem som, e os celulares precisam de playsinline para manter o vídeo dentro da página. Acrescente uma imagem de pôster para que algo apareça antes do vídeo carregar, e ofereça primeiro o WebM, mais leve, com o MP4 como 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>

Essa última regra importa. Algumas pessoas acham o movimento constante perturbador ou fisicamente desconfortável, e o sistema operacional avisa isso ao navegador. Prefers reduced motion explica como respeitar essa preferência do jeito certo.