Onde usar um ícone de app animado: site, press kit e vídeo de lançamento

Como colocar um ícone de app animado na seção hero de uma landing page?

Use um vídeo com fundo transparente com duas fontes e um poster. O Safari reproduz HEVC com alfa; o Chrome e o Firefox reproduzem VP9 com alfa em WebM. Coloque a fonte HEVC primeiro: o Safari reproduz WebM, mas descarta o canal alfa, então precisa escolher o MOV, que é a ordem recomendada por Jake Archibald (Jake Archibald).

<video class="hero-icon" width="320" height="320"
       autoplay muted playsinline
       poster="/img/app-icon-rest.webp">
  <source src="/video/app-icon-intro.mov" type='video/mp4; codecs="hvc1"'>
  <source src="/video/app-icon-intro.webm" type="video/webm">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-icon { display: none; }
    .hero-icon-still { display: block; }
  }
</style>

• muted e playsinline são o que permitem a reprodução automática; a reprodução automática sem som é amplamente permitida, e o Safari no iOS precisa de playsinline para tocar dentro da página (MDN).
• Largura e altura fixas evitam que o layout se desloque enquanto o vídeo carrega.
• O poster é o ícone em repouso, então a seção hero parece pronta mesmo que o vídeo nunca toque.
• Com movimento reduzido, mostre uma imagem estática no lugar (MDN).

Para um ícone que também reage a hover ou rolagem, um arquivo .riv com state machine faz o mesmo trabalho de forma interativa. Marcação completa e fallbacks: vídeo com fundo transparente em um site e logo animado no cabeçalho de um site.

O ícone do site deve tocar uma vez ou em loop?

Toque a intro uma vez e mantenha o frame de repouso. Uma intro curta que termina no ícone soa como uma saudação; o mesmo clipe em loop infinito vira ruído ao lado do seu título.

Se quiser vida contínua, troque por um loop idle (loop de repouso) suave, como uma respiração lenta ou uma piscada ocasional, em vez de repetir a entrada. Pense na acessibilidade: o critério de sucesso 2.2.2 da WCAG 2.2 pede uma forma de pausar, parar ou ocultar conteúdo em movimento que começa automaticamente, dura mais de cinco segundos e aparece junto com outro conteúdo (W3C WAI). Uma intro que toca uma vez e dura menos de cinco segundos evita o problema; um loop precisa de um controle de pausa.

O que um press kit de ícone de app deve incluir?

Jornalistas, parceiros e diretórios de apps precisam, cada um, de um arquivo diferente. Uma pasta de ícone completa atende a todos:

Dê nomes simples aos arquivos (appname-icon-intro.mov, appname-icon-1024.png) e inclua uma nota curta sobre área de respiro e cores de fundo. Um GIF é muito mais pesado que o mesmo clipe em vídeo, então ofereça-o apenas como alternativa (web.dev).

Como usar um ícone animado no Product Hunt?

O Product Hunt permite que a miniatura seja um GIF animado, e ela se anima quando alguém passa o mouse sobre o seu post. Por isso, a maioria das pessoas vê apenas o primeiro frame. Comece a miniatura com o ícone em repouso (a versão "o ícone ganha vida" da sua intro, recortada em formato quadrado), e não com um frame vazio.

Na galeria, comece mostrando o que o produto faz e use a animação do ícone como abertura ou frame final, não como um slide inteiro. Dimensões, limites de tamanho do arquivo e dicas de GIF estão em especificações de GIF para lançamento no Product Hunt.

Como montar um vídeo de lançamento 9:16 em torno do seu ícone?

Mostre o ícone no início e no fim, e deixe as imagens reais do app no meio fazerem o trabalho de convencer:

1. Abertura (primeiros 1 a 3 segundos): a intro do ícone sobre a cor da sua marca. Ela interrompe a rolagem e deixa claro de quem é o vídeo.
2. Meio: imagens reais do app, um recurso por momento, com legendas, já que a maioria das pessoas assiste sem som.
3. Fechamento: o ícone em repouso, o nome do app e onde baixá-lo.

Mantenha os textos e o ícone longe das bordas, onde ficam os botões e as legendas da plataforma. As áreas seguras de cada plataforma estão em especificações de vídeo vertical para Reels, TikTok e Shorts.

O Charmotion produz as peças para isso a partir de uma imagem do seu ícone: um vídeo de abertura 9:16, MP4 em 1080×1080, GIF e o WebM transparente e o MOV HEVC para o seu site, junto com o .riv para o app. Tudo isso vem com os planos pagos.

Um ícone animado pode aparecer na App Store ou no Google Play?

Não como ícone. As duas lojas exibem um ícone estático, mas ambas têm um espaço para vídeo em que o seu ícone animado pode aparecer dentro de imagens reais do app.

• App Store: a diretriz 2.3.4 diz que as App Previews só podem usar capturas de tela em vídeo do próprio app, sendo permitidas narração e sobreposições de vídeo ou texto (App Review Guidelines). A intro de abertura dentro do app, capturada no dispositivo, é permitida; uma animação de logo isolada em motion graphics, não. Especificações: especificações de App Preview da App Store.
• Google Play: o ícone do app é um PNG de 32 bits com alfa, de 512×512 px e no máximo 1.024 KB. O vídeo de prévia é um URL do YouTube; ele pode ser reproduzido automaticamente na página, sem som, por até 30 segundos, e não pode ser monetizado, privado nem ter restrição de idade (Ajuda do Play Console). Saiba mais em recurso gráfico e vídeo promocional do Google Play.

Perguntas frequentes

Posso usar um vídeo com fundo transparente do ícone do meu app no Safari e no Chrome?

Sim, com duas fontes: um HEVC MOV com alfa para o Safari, listado primeiro, e um VP9 WebM com alfa para Chrome e Firefox. Adicione um poster estático do ícone em repouso e dimensões fixas para que o layout nunca se desloque.

O ícone animado no meu site deve ter reprodução automática?

Uma intro curta, sem som, que toca uma vez e termina no ícone estático pode ter reprodução automática sem problemas. Adicione playsinline para o Safari no iOS, mantenha o poster como alternativa caso play() seja bloqueado e mostre apenas a imagem estática quando o visitante preferir movimento reduzido.

O vídeo de prévia do Google Play pode mostrar meu ícone animado?

Sim. A prévia é um vídeo do YouTube que você vincula no Play Console, e ele pode ser reproduzido automaticamente sem som por até 30 segundos. Então abra com a intro do ícone e passe rapidamente para imagens reais do app. Desative os anúncios nesse vídeo e mantenha-o público ou não listado.

Respostas rápidas deste guia

• Onde um ícone de app animado pode realmente ser exibido?

Fontes

• Video with alpha transparency on the web, Jake Archibald
• Alpha transparency in Chrome video, Chrome for Developers
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• App Review Guidelines (2.3.4, 2.3.8, 2.5.1), Apple
• Add preview assets to showcase your app, Play Console Help
• App icons, Apple Human Interface Guidelines