Canvas (fundo generativo) Animações

O que é

Coloca atrás de uma seção (ou num quadro qualquer) um fundo que se mexe sozinho: pontos ligados como constelação, ondas, estrelas vindo na sua direção, chuva, bolhas subindo, grade futurista, luz de aurora… São 12 desenhos prontos. Você escolhe o desenho, a cor, a quantidade de elementos e quando ele anima.

É uma etiqueta <canvas> (uma área de desenho do navegador) com sw-ani="canvas". O SW Core desenha o fundo quadro a quadro, no tamanho que o canvas tiver na tela — por isso você precisa dar largura e altura a ele (com classes como w-fl ar-2-1 ou pelo CSS da sua página). Por padrão ele só anima enquanto está visível: rolou para longe, ele para e não gasta bateria.

Quando usar

• Topo de página de tecnologia, evento ou lançamento: constelação, grade ou estrelas atrás do título.
• Seção de destaque que precisa de "vida" sem pesar com vídeo: aurora ou ondas bem discretas.
• Página de "em breve" / manutenção: chuva, bolhas ou espiral.
• Mostrar crescimento: o desenho graph sobe uma linha de gráfico.

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação (o swcore.motion.min.js já traz o GSAP e vem antes do swcore.min.js).

   <!-- no <head> -->
   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- no fim do <body>: o motion ANTES do swcore -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Crie um <canvas> com sw-ani="canvas", dê tamanho a ele e escolha o desenho e a cor.

   <canvas sw-ani="canvas"
           sw-ani-canvas-preset="constellation"
           sw-ani-canvas-color="var(--sw-pri)"
           class="w-fl ar-2-1"></canvas>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<section class="rel ov-hi bg-g-drk">
  <canvas sw-ani="canvas" sw-ani-canvas-preset="constellation"
          sw-ani-canvas-color="var(--sw-pri)" sw-ani-canvas-count="60"
          class="abs-fill w-fl h-fl"></canvas>

  <div class="rel p-10 t-ct">  <!-- "rel" põe o texto na frente do canvas -->
    <h1>Tecnologia que vende</h1>
    <a href="/contato" sw-btn="pri pill">Fale com a gente</a>
  </div>
</section>

<div class="l l-2 gap-4 alc">
  <div><strong>+320% de visitas</strong></div>
  <canvas sw-ani="canvas" sw-ani-canvas="scroll" sw-ani-canvas-preset="graph"
          sw-ani-canvas-color="var(--sw-suc)" class="w-fl ar-2-1"></canvas>
</div>

<main class="rel ov-hi bg-g-drk">
  <canvas sw-ani="canvas" sw-ani-canvas-preset="bubbles"
          sw-ani-canvas-color="#67e8f9" sw-ani-canvas-count="30"
          class="abs-fill w-fl h-fl"></canvas>
  <div class="rel p-10 t-ct">
    <h1>Em breve</h1>
    <p>Nosso novo site está quase pronto.</p>
  </div>
</main>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, antes do swcore.min.js.
• Um <canvas> com largura e altura definidas.

Cuidados — erros comuns

• Canvas sem tamanho fica com 300 × 150 px ou "some". Dê largura e altura: class="w-fl ar-2-1", ou abs-fill w-fl h-fl para cobrir a seção.
• Como fundo de seção, o texto precisa ficar na frente: coloque rel na caixa do texto, depois do canvas.
• Nome de desenho errado (ex.: particulas) não dá erro: o canvas fica vazio. Confira a lista na tabela.
• A palavra scrub sozinha não prende à rolagem. O certo é sw-ani-canvas="scroll".
• Os desenhos rings e graph têm bolinhas brancas: em fundo branco elas somem. Use num fundo escuro.

O que ele não faz

• É decorativo: leitor de tela não lê o que está no canvas. Não coloque informação só nele.
• Muitos elementos (count alto) numa tela grande consomem processador e bateria. Em fundo de página inteira prefira 20 a 60.
• Quem ativou "reduzir movimento" no sistema vê o desenho parado (um quadro só). data-sw-force (ou sw-ani-force) faz animar mesmo assim.