Mobile e rede lenta Animações

O que é

Responsivo de verdade não é baixar um arquivo pesado de 4.6 MB e diminuir seu tamanho visual no CSS. O SWCore analisa três sinais ambientais (Economia de dados, Movimento reduzido e Tamanho da tela) antes de requisitar a mídia na rede, garantindo que o visitante receba a experiência visual exata sem desperdício de dados ou lentidão.

Como funciona

A decisão segue uma ordem de prioridade estrita: 1. Se o visitante ativou economia de dados (saveData) ou movimento reduzido (prefers-reduced-motion), entrega apenas o pôster estático (~65 KB); 2. Se a tela for móvel (< 768px), entrega o vídeo mobile leve (~500 KB); 3. Se for desktop em conexão normal, entrega o vídeo HD completo (~4.64 MB).

Exemplos

<!-- 
  Prioridade de Decisão:
  1. saveData OU prefers-reduced-motion -> Imagem Estática (~65 KB)
  2. screen < 768px                    -> Vídeo Mobile (~500 KB)
  3. Desktop normal                    -> Vídeo HD (~4.64 MB)
-->

<!-- Teste a decisão do SWCore alterando os sinais do ambiente -->
<div class="demo-video-box">
  <div id="sim-media-stage"></div>
</div>

<script>
  // O SWCore avalia os 3 sinais antes de injetar o src:
  const decisao = SWMotion.resolveMedia({
    desktop: 'video-hd.mp4',
    mobile: 'video-mobile.mp4',
    poster: 'poster.webp',
    screenWidth: window.innerWidth
  });
  console.log('Mídia escolhida:', decisao.type, decisao.reason);
</script>

<!-- Comparativo do impacto de carregar a mídia certa -->
Desktop HD: 4.64 MB (100%)
Mobile:     500 KB  (11% do peso — 89% economia)
Estático:   65 KB   (1.4% do peso — 98.6% economia)

<!-- O SWCore decide qual mídia injetar ANTES de fazer qualquer download -->
<div 
  data-sw="adaptive-media"
  data-sw-desktop="../../assets/images/video/garden-motion.mp4"
  data-sw-mobile="../../assets/images/video/garden-mobile.mp4"
  data-sw-poster="../../assets/images/video/garden-mobile-poster.webp"
  data-sw-breakpoint="768"
  data-sw-autoplay
  style="width: 100%; height: 260px; border-radius: .75rem; overflow: hidden;">
</div>

// Retorna a melhor estratégia sem injetar tags no DOM:
const decision = SWMotion.resolveMedia({
  desktop: 'garden-hd.mp4',
  mobile: 'garden-mobile.mp4',
  poster: 'garden-poster.webp',
  breakpoint: 768
});

console.log(decision.type);   // 'video-mobile' | 'video-desktop' | 'static'
console.log(decision.src);    // URL escolhida
console.log(decision.reason); // Ex: 'Tela mobile (375px < 768px)'

Atributos

Variantes

Eventos

Nenhum.

API (JavaScript)

Requisitos

• O navegador suporta window.matchMedia nativamente em 100% dos navegadores modernos.
• Para celulares com suporte a Network Information API, navigator.connection.saveData é lido automaticamente.

Limitações — o que ele não faz

• A decisão deve ser executada antes de atribuir qualquer src ao elemento — se o navegador já tiver iniciado o download de um vídeo HD, remover a tag depois não recupera os dados consumidos.
• Acessibilidade e conteúdo: o texto e botões de chamada para ação (CTA) devem permanecer intactos em todas as 3 entregas.