SWCore / Animações / Canvas (fundo generativo)

Canvas (fundo generativo) Animações

12 presets de fundo desenhado por código — partículas, ondas, chuva, aurora — sem imagem nenhuma.

O que é

Fundo animado gerado inteiramente em <canvas>, sem depender de nenhum arquivo de imagem/vídeo — dá pra jogar atrás de qualquer seção da página.

Como funciona

Cada preset é um pequeno sistema de partículas/formas próprio, desenhado a cada frame. sw-ani-canvas="scroll" faz o movimento reagir à posição do scroll em vez de rodar sozinho.

Exemplos

Constelação de partículas Ao vivo 
<canvas sw-ani="canvas"
        sw-ani-canvas-preset="particles"
        sw-ani-canvas-color="var(--sw-pri)"
        sw-ani-canvas-count="60"></canvas>

<!-- é um <canvas>: dê largura e altura a ele pelo CSS -->
Alguns dos 23 presets Ao vivo
waves
aurora
rain
hex
orbit
beams
<canvas sw-ani="canvas" sw-ani-canvas-preset="waves"></canvas>
<canvas sw-ani="canvas" sw-ani-canvas-preset="aurora"></canvas>
<canvas sw-ani="canvas" sw-ani-canvas-preset="rain"></canvas>

<!-- os 23: particles constellation stars starfield · waves sine aurora mesh
     rain float bubbles · grid hex honeycomb matrix · rings orbit spiral vortex
     · beams rays · graph chart -->
Densidade e cor Ao vivo
count 12
padrão — 45
count 160
<canvas sw-ani="canvas" sw-ani-canvas-count="12">…</canvas>   <!-- discreto -->
<canvas sw-ani="canvas">…</canvas>                            <!-- padrão: 45 -->
<canvas sw-ani="canvas" sw-ani-canvas-count="160">…</canvas>  <!-- denso -->

<!-- vai de 5 a 200; acima disso ele limita sozinho -->
Como fundo de uma seção Ao vivo
Seu título aqui
o fundo é desenhado por código — nenhuma imagem
<div class="rel" style="overflow:hidden">
  <canvas sw-ani="canvas" sw-ani-canvas-preset="constellation" class="abs-fill"></canvas>

  <div class="abs-mid">
    <h2>Seu título aqui</h2>
  </div>
</div>

Atributos

sw-ani-canvas-preset
qual fundo desenhar — padrão "particles" (lista completa nas Variantes)
sw-ani-canvas-color
cor do desenho — aceita var(--sw-pri) ou cor crua
sw-ani-canvas-count
quantos elementos desenhar — padrão 45 (de 5 a 200)
sw-ani-canvas
quando animar: view (padrão) \| once \| scroll

Variantes

particles · constellation · stars · starfield
pontos e ligações — o clássico "constelação"
waves · sine · aurora · mesh
ondas e superfícies suaves
rain · float · bubbles
elementos caindo ou subindo
grid · hex · honeycomb · matrix
malhas e grades
rings · orbit · spiral · vortex
círculos e movimento em volta de um centro
beams · rays
feixes de luz
graph · chart
linhas de gráfico animadas
view (padrão)
anima enquanto está visível na tela
once
anima uma vez e para
scroll
o movimento é preso à posição da rolagem

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do pacote swcore.motion.min.css/js.

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

  • É um <canvas> desenhado quadro a quadro: densidade alta em tela grande consome bateria e processador. Prefira contagens menores em fundo de página inteira.
  • O canvas não entende var(--token) sozinho — o componente resolve o token antes de desenhar, mas cores calculadas por outros meios podem não funcionar.
  • É decorativo: não coloque informação dentro dele, porque não é lido por leitor de tela.
← AnteriorCursor personalizado Próximo →Lottie