SWCore / Animações / Glow (segue o mouse)

Glow (segue o mouse) Animações

Um brilho acompanha o cursor por dentro do elemento — spotlight em cards, hero.

O que é

Cria um halo de luz que segue o ponteiro dentro dos limites do elemento, dando destaque a onde o usuário está olhando.

Como funciona

A posição do brilho é uma variável CSS atualizada via mousemove; o "pulse" (respirar sozinho) é uma animação independente do mouse.

Exemplos

Brilho seguindo o mouse Ao vivo
Passe o mouse aqui dentro
<div sw-ani="glow" data-sw-color="var(--sw-pri)">
  um brilho segue o mouse por dentro do elemento
</div>

<!-- ATENÇÃO: as opções deste componente usam data-sw-*, não sw-ani-*.
     sw-ani-color não é lido — a grafia certa é data-sw-color. -->
Cores do halo Ao vivo
primária
sucesso
cor crua
<div sw-ani="glow" data-sw-color="var(--sw-pri)">…</div>
<div sw-ani="glow" data-sw-color="var(--sw-suc)">…</div>
<div sw-ani="glow" data-sw-color="#f43f5e">…</div>

<!-- sem data-sw-color, ele usa a cor do texto (currentColor) -->
Força e espalhamento Ao vivo
intensity 8
padrão (20)
intensity 80
+ spread 80
<div sw-ani="glow" data-sw-intensity="8">discreto</div>
<div sw-ani="glow">padrão — 20</div>
<div sw-ani="glow" data-sw-intensity="80">forte</div>

<!-- spread espalha o halo por uma área maior -->
<div sw-ani="glow" data-sw-intensity="60" data-sw-spread="80">…</div>
Pulsando sozinho, sem mouse Ao vivo
respiro sozinho
mais forte
<div sw-ani="glow" data-sw-color="var(--sw-pri)" data-sw-pulse>
  respiro sozinho, sem precisar do mouse
</div>

<!-- quem pediu menos movimento no sistema (prefers-reduced-motion)
     não recebe o pulso — ele é desligado automaticamente -->
Num card de destaque Ao vivo
Plano Pro
Passe o mouse: o brilho acompanha e destaca o cartão.
Mais vendido
Este pulsa sozinho, pra puxar o olho antes do mouse chegar.
<div sw-ani="glow" data-sw-color="var(--sw-pri)" data-sw-intensity="35">
  <strong>Plano Pro</strong>
</div>

<!-- o do lado pulsa sozinho pra chamar atenção -->
<div sw-ani="glow" data-sw-color="var(--sw-suc)" data-sw-pulse>
  <strong>Mais vendido</strong>
</div>

Atributos

data-sw-color
cor do brilho — padrão currentColor (a cor do texto do elemento)
data-sw-intensity
força do halo — padrão 20 (aceita de 0 a 200)
data-sw-spread
quanto o halo se espalha — padrão 0 (aceita de 0 a 200)
data-sw-pulse
só a presença: faz o brilho "respirar" sozinho, sem depender do mouse

Variantes

(sem cor)
usa a própria cor do texto do elemento
data-sw-pulse
pulsa sozinho — bom pra chamar atenção sem exigir interação
intensity baixo (5–15)
discreto, some no fundo claro
intensity alto (60+)
forte, praticamente um holofote

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

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

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

  • As opções deste componente são data-sw-*. A forma curta sw-ani-* funciona pro NOME do efeito (sw-ani="glow"), mas não pras opções color/intensity/spread/pulse — nesse caso elas são ignoradas em silêncio.
  • O brilho que segue o cursor depende de mouse: no celular, só o data-sw-pulse continua valendo.
← AnteriorMagnetic (ímã) Próximo →Cursor personalizado