Glow (segue o mouse) Animações

O que é

Faz o elemento brilhar, em três camadas que você liga ou desliga: (1) o texto ganha um brilho de neon na cor escolhida; (2) uma mancha de luz segue o mouse por dentro do bloco quando ele passa por cima; (3) opcionalmente, um halo em volta da caixa e um "respirar" contínuo que chama atenção mesmo sem mouse.

A cor vem de sw-ani-color (sem ela, usa a cor do próprio texto). A força do brilho do texto é sw-ani-intensity (padrão 20; 0 desliga o brilho do texto e deixa só a luz do mouse). sw-ani-spread acende um halo em volta da caixa e sw-ani-pulse faz o brilho pulsar sozinho. No tema escuro a luz que segue o mouse clareia o que está por baixo (brilha em fundo escuro); no tema claro ela vira uma mancha de cor por trás do texto, que aparece também em fundo branco.

Quando usar

• Card de destaque em página escura (plano mais vendido, oferta): a luz seguindo o mouse convida a explorar.
• Letreiro de neon: "Aberto agora", "Ao vivo", "Black Friday" com sw-ani-pulse.
• Topo de página escuro de tecnologia, jogos, música, balada.
• Em página clara, a luz do mouse vira uma mancha de cor suave por trás do texto — combina com cartão branco e com bloco escuro.

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

   Coloque sw-ani="glow" e a cor num bloco de fundo escuro. Passe o mouse por dentro dele.

   Passe o mouse aqui dentro

   <div sw-ani="glow" sw-ani-color="var(--sw-pri)" class="bg-g-drk r-m p-4">Passe o mouse aqui dentro</div>

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.

<div class="l l-2 gap-4">
  <div class="bg-g-drk r-m p-4">…Básico…</div>

  <div sw-ani="glow" sw-ani-color="var(--sw-pri)" sw-ani-intensity="0" sw-ani-spread="24"
       class="bg-g-drk r-m p-4">
    <strong>Mais escolhido</strong>
    <div class="t-xg fw7">R$ 99</div>
  </div>
</div>

<span sw-ani="glow" sw-ani-color="#22d3ee" sw-ani-intensity="14" sw-ani-pulse>
  ABERTO AGORA
</span>

<style>
  .luz-forte { --sw-glow-op: .85; }  /* padrão .45 */
</style>

<div sw-ani="glow" sw-ani-color="var(--sw-sec)" sw-ani-intensity="0"
     class="luz-forte bg-g-drk r-m p-4">
  <strong>Portfólio 2026</strong>
</div>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, antes do swcore.min.js.

Cuidados — erros comuns

• Cartão branco no tema escuro: no tema escuro a luz clareia o que está atrás, então num cartão branco ela não aparece. Use bloco escuro no tema escuro (no tema claro funciona nos dois).
• O brilho do texto vale para todo texto de dentro do bloco. Num card com muito texto isso embaça a leitura: use sw-ani-intensity="0" no card e, se quiser neon, coloque o glow só no título.
• sw-ani="glow loop" e sw-ani="glow hover" são outra coisa: o brilho em volta, só CSS, da página Efeitos de entrada. O componente desta página é o glow sozinho.
• Não dá para ter glow e outro efeito de mouse (tilt, magnetic) no mesmo elemento: vale só o primeiro. Coloque um dentro do outro.

O que ele não faz

• A luz que segue o mouse só existe com mouse. No celular sobram o brilho do texto, o halo e o pulso.
• Quem ativou "reduzir movimento" no sistema não vê a luz do mouse nem o pulso (o brilho fixo continua).