Como colocar uma animação com fundo transparente sobre o conteúdo

Quais formatos mantêm o fundo transparente?

Em vídeo, você precisa dos dois arquivos. O markup testado por Jake Archibald lista a fonte HEVC primeiro, porque o Safari consegue reproduzir VP9, mas não a transparência do VP9, e sem isso escolheria o WebM e mostraria uma caixa opaca (Jake Archibald). No teste dele, o mesmo clipe tinha 1,1 MB em VP9 e 3,4 MB em HEVC.

Um arquivo Rive evita a divisão em dois arquivos e costuma ser bem menor, mas exige o runtime do Rive. Use vídeo quando a animação for pré-renderizada (3D, partículas, filmagem real) e Rive quando for um personagem que precisa reagir. Os detalhes de codificação estão no guia de vídeo com fundo transparente.

Como sobrepor uma animação a uma página com CSS?

Transforme o contêiner do conteúdo no contexto de posicionamento e depois coloque a animação em um filho com posicionamento absoluto acima dele:

<div class="stage">
  <img src="/product.jpg" alt="The Acme backpack in green" width="1200" height="800">
  <video class="overlay" autoplay muted loop playsinline aria-hidden="true">
    <source src="/sparkle.mov" type='video/quicktime; codecs="hvc1"'>
    <source src="/sparkle.webm" type="video/webm">
  </video>
</div>

<style>
.stage { position: relative; isolation: isolate; }
.stage img { display: block; width: 100%; height: auto; }
.overlay {
  position: absolute;
  inset: auto 4% 4% auto;    /* bottom-right corner */
  width: clamp(96px, 22%, 240px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .overlay { display: none; }
}
</style>

isolation: isolate cria um contexto de empilhamento, então o z-index da sobreposição só concorre com os elementos irmãos dentro de .stage e nunca fica acima do header do site ou dos modais. Para uma sobreposição com Rive, troque o vídeo por um <canvas class="overlay"> e crie a instância do Rive nele; o canvas fica transparente em toda área onde a arte não é desenhada.

No Safari do iOS, um vídeo inline só tem reprodução automática quando está sem som e tem playsinline (WebKit). Uma sobreposição em loop que roda por mais de cinco segundos ao lado do conteúdo também precisa de uma forma de pausar ou ocultar, segundo o critério WCAG 2.2.2, ou deve parar depois de alguns ciclos.

Como evitar que a sobreposição bloqueie toques e cliques?

Na web, pointer-events: none na sobreposição faz com que cliques, toques e hovers passem para o que estiver embaixo. Sem isso, um canvas ou vídeo transparente continua capturando todos os cliques dentro do seu retângulo, mesmo onde nada está visível, e esse é o bug de sobreposição mais comum.

Duas ressalvas:

• Os listeners do Rive param de funcionar. Se a state machine reage a hover ou cliques por meio de listeners do Rive, eles precisam de eventos de ponteiro no canvas. Mantenha pointer-events: auto em um canvas pequeno que cubra só o personagem, ou controle as reações pelo código com triggers.
• Mantenha fora da árvore de acessibilidade. Adicione aria-hidden="true" às sobreposições decorativas para que os leitores de tela as ignorem.

SwiftUI usa .overlay ou um ZStack, e .allowsHitTesting(false) deixa os toques passarem:

ContentView()
  .overlay(alignment: .bottomTrailing) {
    mascot.view()
      .frame(width: 120, height: 120)
      .allowsHitTesting(false)
      .accessibilityHidden(true)
      .padding()
  }

Jetpack Compose usa um Box com a sobreposição desenhada por último. Um composable sem modificadores de pointer input não consome toques, então eles chegam ao conteúdo embaixo. Se o player for uma View incorporada via AndroidView, verifique se ela não intercepta os toques.

Box(Modifier.fillMaxSize()) {
  Content()
  Mascot(Modifier.align(Alignment.BottomEnd).padding(16.dp).size(120.dp))
}

Como dimensionar e posicionar a sobreposição de forma responsiva?

• Use unidades relativas com limites. width: clamp(96px, 22%, 240px) cresce com o contêiner, mas nunca fica minúsculo no celular nem enorme em telas largas.
• Trave a proporção. aspect-ratio: 1 (ou a proporção do clipe) reserva a altura certa antes de o arquivo carregar, então nada pula.
• Ancore em um canto ou borda. Valores de inset em porcentagem mantêm o personagem no mesmo ponto relativo em qualquer tamanho de tela.
• Ajuste, não corte. Em vídeo, use object-fit: contain; no Rive, defina o fit do layout como contain para que o artboard nunca seja cortado.
• Dimensione a superfície de desenho do Rive. Chame resizeDrawingSurfaceToCanvas() no carregamento e sempre que o tamanho do canvas mudar, para que as bordas vetoriais fiquem nítidas na densidade de pixels do dispositivo (Rive).

Em telas pequenas, avalie se a sobreposição ainda compensa o espaço que ocupa. Se ela cobrir textos ou botões na largura de um celular, mova-a para baixo do conteúdo ou oculte-a nesse breakpoint.

Como manter uma sobreposição transparente acessível?

Sobreposições ficam por cima de conteúdo que as pessoas precisam ler e usar, então trazem mais risco de acessibilidade do que uma animação em um espaço próprio.

• Nunca cubra textos ou controles. Confira todos os breakpoints. Uma sobreposição que esconde parte de um título ou de um botão em alguma largura é um bug, mesmo com os cliques passando através dela.
• Mantenha o contraste. Se a sobreposição passar por trás de um texto, ele precisa continuar legível em todos os frames, não só no primeiro.
• Oculte elementos decorativos das tecnologias assistivas. Use aria-hidden="true" na web e .accessibilityHidden(true) no SwiftUI. Se a animação transmitir um significado, como um estado de sucesso, coloque esse significado também em texto real.
• Respeite o movimento reduzido. Com prefers-reduced-motion: reduce, oculte a sobreposição ou mostre um frame estático (MDN).
• Limite o loop. O critério de sucesso 2.2.2 da WCAG 2.2 exige uma forma de pausar, parar ou ocultar movimentos automáticos que durem mais de cinco segundos ao lado de outro conteúdo (W3C). Pare o loop depois de alguns ciclos ou ofereça um controle de pausa visível.

Evite efeitos de piscar rápido em sobreposições, como brilhos ou raios: a WCAG limita o conteúdo a no máximo três flashes por segundo. Veja animação acessível e movimento reduzido para o checklist completo.

Como evitar que sobreposições deixem a página lenta?

• Anime só com transform e opacity. Se você animar a posição da sobreposição em CSS, use transform em vez de top ou left; o web.dev observa que transform e opacity ficam no compositor (web.dev).
• Pause o que estiver fora da tela. Use um IntersectionObserver para chamar video.pause() ou o pause() da instância do Rive quando a sobreposição sair da área visível com a rolagem, e retome quando ela voltar.
• Compartilhe o contexto WebGL. Os navegadores limitam a quantidade de contextos WebGL por página. Com várias sobreposições Rive na mesma página usando @rive-app/webgl2, defina useOffscreenRenderer: true para que elas compartilhem um único contexto (Rive).
• Faça a limpeza. Chame cleanup() nas instâncias do Rive que você remover, principalmente em single-page apps que montam e desmontam views.
• Fique de olho no peso do vídeo. Arquivos HEVC com alfa são bem maiores que os equivalentes em VP9, então mantenha os clipes transparentes curtos e no tamanho do espaço em que serão exibidos.

Em todos os planos pagos, o Charmotion entrega o mesmo personagem nas duas formas: um único .riv para overlays interativos e arquivos WebM e MOV transparentes, exportados sob demanda do mesmo conjunto, para os pré-renderizados, então você escolhe por posicionamento.

Como colocar uma animação transparente sobre o conteúdo

1. Escolha um formato transparente. Use um arquivo Rive para personagens interativos, ou um par de .mov HEVC com alfa e WebM VP9 com alfa para animações pré-renderizadas.
2. Crie o contexto de empilhamento. Defina position: relative e isolation: isolate no contêiner que abriga o conteúdo.
3. Posicione a sobreposição. Deixe o canvas ou o vídeo com position: absolute, ancore com inset e defina um z-index dentro do contêiner.
4. Deixe a interação passar. Adicione pointer-events: none e aria-hidden="true" na web, ou .allowsHitTesting(false) no SwiftUI.
5. Dimensione de forma responsiva. Use uma largura com clamp e aspect-ratio, e redimensione a superfície de desenho do Rive no carregamento.
6. Ajuste performance e movimento. Pause sobreposições fora da tela, compartilhe o contexto WebGL entre as instâncias do Rive e oculte ou congele a sobreposição com movimento reduzido.

Perguntas frequentes

Por que meu WebM transparente aparece com uma caixa preta no Safari?

O Safari reproduz WebM, mas descarta o canal alfa do VP9, então as áreas transparentes ficam opacas. Adicione um .mov HEVC com alfa como primeira fonte dentro do elemento video: o Safari escolhe esse arquivo, enquanto Chrome, Edge e Firefox o ignoram e usam o WebM.

O canvas do Rive é transparente por padrão?

Sim. O canvas desenha apenas a arte do artboard, então as áreas sem preenchimento mostram a página por trás. Se aparecer um fundo sólido, é porque o próprio artboard tem preenchimento no arquivo de origem ou há uma cor de fundo em CSS definida no elemento canvas ou no wrapper dele.

Como fazer os cliques atravessarem uma sobreposição de animação?

Defina pointer-events: none no elemento da sobreposição em CSS. No SwiftUI, use .allowsHitTesting(false). Isso também desativa os listeners de ponteiro do próprio Rive, então controle o personagem com triggers via código se ele precisar reagir. Mantenha qualquer parte interativa em um elemento separado e menor.

Posso sobrepor uma animação transparente a um vídeo?

Sim. Coloque os dois em um contêiner posicionado e sobreponha a animação transparente ao vídeo de fundo com um canvas ou um segundo elemento video com posicionamento absoluto. Mantenha a sobreposição sem som e decorativa, e pause os dois quando saírem da área visível para poupar bateria e CPU.

Respostas rápidas deste guia

• Como impedir que uma sobreposição de animação bloqueie os cliques?

Fontes

• Video with alpha transparency on the web, Jake Archibald
• New video policies for iOS, WebKit
• How to create high-performance CSS animations, web.dev
• Web (JS) runtime, Rive
• Canvas vs WebGL, Rive
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
• prefers-reduced-motion, MDN Web Docs