Vídeo em loop: como as marcas fazem clipes que nunca acabam

Um vídeo em loop é um clipe curto feito para se repetir para sempre sem que ninguém veja onde recomeça. Para as marcas, é um dos formatos mais úteis que existem: um único ficheiro pode correr atrás do título de um site, num ecrã junto à caixa, por baixo de uma canção no Spotify ou atrás do cartão de espera de uma transmissão em direto. A técnica é simples de enunciar. Faz com que a última imagem dê diretamente na primeira, mantém o movimento lento e contínuo e nunca ponhas no clipe um acontecimento isolado, porque tudo o que acontece uma só vez passa a marcar o reinício.

Onde as marcas usam um vídeo em loop

Os loops servem em qualquer sítio onde as pessoas chegam num momento aleatório e ficam um tempo indeterminado. Ninguém começa a olhar para uma montra ao segundo zero, por isso uma história com princípio e fim tem a forma errada. Um loop não tem princípio, e é precisamente essa a ideia.

Cada um destes locais tem as suas regras de tamanho e de som. Vídeos de fundo em sites trata do caso da web em pormenor, e vídeos de fundo ambiente aborda os loops longos e calmos que correm em ecrãs e transmissões.

O que faz um loop parecer interminável

Tecnicamente, um loop só precisa que o fim encontre o início. Na perceção, precisa de mais. As pessoas notam a repetição através de pontos de referência: o momento em que uma mancha brilhante passa por um canto, a imagem em que entra uma forma, uma cintilação de grão que cai sempre no mesmo sítio. Tira esses 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 arrancar cria uma batida que o olho consegue contar.
• Ciclos inteiros. Tudo o que se move completa um número inteiro de voltas ou passagens na duração do clipe, e por isso termina exatamente onde começou.
• Várias camadas a velocidades relacionadas. Um fundo que dá uma volta e um brilho que dá duas disfarçam a repetição um do outro.
• Sem acontecimentos isolados. Nada de flashes, cortes, vinhetas de logótipo ou objetos que surjam uma vez. Se acontece uma vez, marca o reinício.
• Palavras paradas. O texto que entra animado voltará a entrar animado em cada volta. Num vídeo em loop, deixa as palavras simplesmente estar lá.

O pormenor ao nível da imagem de uma junção limpa, incluindo a última imagem duplicada que causa a maioria dos soluços, está em vídeo em loop sem emenda.

Que duração deve ter um vídeo em loop

A duração depende da velocidade e do tempo que as pessoas vão ficar a olhar. Um loop que alguém vê de relance durante três segundos pode ser curto. Um loop que passa numa parede toda a tarde tem de ser longo e lento o suficiente para que a repetição nunca se torne óbvia. Clipes mais longos dão ficheiros maiores, por isso equilibra os dois fatores.

Que duração deve ter um loop de vídeo analisa este compromisso local a local, tendo em conta o tamanho dos ficheiros.

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

1. 1

   Parte do sítio onde vai passar

   Escolhe primeiro o tamanho exato: 1920×1080 para um ecrã horizontal ou cabeçalho, 1080×1920 para stories, Reels e ecrãs verticais, 1080×1350 para uma publicação no feed.

2. 2

   Escolhe uma camada em movimento

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

3. 3

   Mantém as palavras paradas e calmas

   Coloca o texto onde o fundo é mais sossegado. Se tiver mesmo de se animar, deixa o movimento dentro do fundo.

4. 4

   Define a duração em ciclos inteiros

   Garante que cada movimento completa um número inteiro de ciclos no clipe, para que a última imagem flua para a primeira.

5. 5

   Exporta como vídeo e vê-o em loop

   Exporta em MP4, ou WebM para a web, e reproduz em repetição no tamanho real durante pelo menos um minuto. Corrige tudo o que reparares duas vezes.

É aqui que entra o Gradiently. Cada Mark é um fundo vivo de gradiente e material que já se move, por isso, com o Pro, um design construído sobre ele exporta-se como um loop sem emenda de 5 a 30 segundos, sem que tenhas de animar nada. Como não há dois Marks iguais, o loop da tua montra não será o mesmo fundo genérico da loja ao lado.

Pôr um vídeo em loop num site

Os navegadores só reproduzem automaticamente vídeo sem som, e os telemóveis precisam de playsinline para o manter na página. Acrescenta uma imagem de pré-visualização para que algo apareça antes de o vídeo carregar, e oferece 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>

Esta última regra importa. Há pessoas para quem o movimento constante é uma distração ou até um desconforto físico, e o sistema operativo avisa o navegador. Preferência por movimento reduzido explica como a respeitar como deve ser.