Magnetic (ímã) Animações

O que é

Quando o ponteiro se aproxima, o elemento se desloca um pouco na direção dele; quando o ponteiro vai embora, volta ao lugar com um balanço elástico. É um detalhe pequeno que faz o botão principal parecer "vivo" e convida ao clique.

O ímã começa a agir quando o mouse chega a uma distância de 1,6 vez o tamanho do elemento (medida a partir do centro dele). Quanto mais perto, mais forte o puxão. A força vai de 0 a 1 em sw-ani-strength (padrão 0,35). Funciona só com mouse.

Quando usar

• O botão principal da página ("Quero meu site", "Agendar"): um só, para ele se destacar.
• Botões redondos de ícone (redes sociais, "voltar ao topo", "play").
• Logo ou selo no topo de um portfólio.
• Evite em menus e listas com muitos itens: tudo "fugindo" do mouse atrapalha.

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). O swcore.compl.min.css é para os ícones swi-*.

   <!-- no <head> -->
   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.compl.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

   Coloque sw-ani="magnetic" no botão. Chegue perto com o mouse, sem clicar.

   Quero meu site

   <a href="/contato" sw-ani="magnetic" sw-btn="pri pill g">Quero meu site</a>

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="topo">
  <a href="/contato" sw-ani="magnetic" sw-btn="glass pill g">
    Quero meu site <i class="swi-right-arrow-alt"></i>
  </a>
</section>

Botão "tocar vídeo" em cima da capa Ao vivo

<div class="rel r-m ov-hi">
  <img src="/capa-video.jpg" alt="Capa do vídeo" class="w-fl blk">
  <div class="abs-mid">
    <button sw-ani="magnetic" sw-ani-strength="0.5" sw-btn="lit rnd xg" aria-label="Tocar vídeo">
      <i class="swi-play"></i>
    </button>
  </div>
</div>

<footer class="flx alc j-sb gap-3">
  <span>© 2026 Sua Empresa</span>
  <div class="flx gap-2">
    <a href="https://instagram.com/…" sw-ani="magnetic" sw-btn="ghost rnd p" aria-label="Instagram"><i class="swil-instagram"></i></a>
    <a href="https://wa.me/…" sw-ani="magnetic" sw-btn="ghost rnd p" aria-label="WhatsApp"><i class="swil-whatsapp"></i></a>
    <a href="https://facebook.com/…" sw-ani="magnetic" sw-btn="ghost rnd p" aria-label="Facebook"><i class="swil-facebook"></i></a>
  </div>
</footer>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, antes do swcore.min.js.
• Mouse. No celular o elemento fica parado.

Cuidados — erros comuns

• A força vai de 0 a 1. Números como 10 ou 60 (que apareciam em versões antigas desta página) são inválidos: o SW Core ignora e usa 0.35.
• Em botão pequeno, força alta faz o alvo "fugir" do clique. Em ícones pequenos use 0.2 a 0.4.
• Cada elemento com ímã fica escutando o mouse na página inteira. Dezenas deles juntos (ex.: numa lista) pesam — use em poucos.
• Usa junto com o cursor personalizado? Elementos com ímã já fazem o cursor crescer quando o mouse passa por cima.

O que ele não faz

• Só funciona com mouse; no celular o elemento não se mexe.
• A distância em que o ímã começa a puxar não é configurável (1,6 vez o tamanho do elemento).
• Quem ativou "reduzir movimento" no sistema não vê o efeito (a menos que você use data-sw-force).