SWCore / Animações / Interações

Interações Animações

Microinterações que respondem à posição do ponteiro: cursor contextual, botão magnético, inclinação 3D (tilt) e marquee.

O que é

Transforma a posição do mouse em resposta contida — um cursor que muda de forma sobre certos elementos, um botão que "puxa" o ponteiro pra perto, um cartão que inclina em 3D seguindo o mouse, um texto correndo continuamente (marquee). Todos preservam funcionamento no toque, teclado e com prefers-reduced-motion ativo.

Como funciona

Cursor, magnetic e tilt escutam a posição do ponteiro e respondem via gsap.quickTo — leve, sem travar o scroll nem interferir em foco/teclado. O cursor é sempre global (segue o mouse na página inteira, não só dentro de um container) — coloque o atributo no <body>, igual o exemplo mostra. O marquee usa um "trilho" que a própria biblioteca clona e recicla via gsap.ticker, sem depender de CSS @keyframes — por isso funciona com qualquer largura de conteúdo.

Exemplos

Cursor — já está ativo nesta página inteira; passe o mouse pelos links do menu ou pelo botão abaixo Ao vivo

O atributo está aqui, mas o efeito é sempre global — o ponto segue o mouse na página inteira, inclusive fora desta caixa e do menu lateral.

<body data-sw="cursor" data-sw-cursor-color="var(--color-primary)">
  <a href="#">Qualquer link já cresce sozinho</a>
  <button data-sw-cursor-hover>Alvo customizado</button>
</body>
Botão magnético — aproxime o mouse sem precisar tocar Ao vivo 
<button data-sw="magnetic" data-sw-strength=".35">Conhecer projeto</button>
Tilt — incline o mouse sobre o cartão Ao vivo
Case Smooll

Interfaces que respondem.

O scroll monta a cena; o ponteiro adiciona resposta local.

<article data-sw="tilt" data-sw-max="15">
  <p>Case Smooll</p>
  <strong>Interfaces que respondem.</strong>
</article>
Marquee — passa o mouse por cima pra pausar Ao vivo
DESIGN ✦ MOTION ✦ CÓDIGO ✦ ESTRATÉGIA ✦ 
<div data-sw="marquee" data-sw-speed="70">
  <span>DESIGN ✦ MOTION ✦ CÓDIGO ✦ ESTRATÉGIA ✦ </span>
</div>

Atributos

data-sw="cursor"
no <body> (ou em qualquer elemento — o efeito é sempre da página inteira) — cria o ponto que segue o mouse
data-sw-cursor="dot|ring|image"
formato do cursor (padrão "dot")
data-sw-cursor-size
tamanho em px do estado normal (padrão 10; o hover usa 3.6× esse valor)
data-sw-cursor-color
cor CSS do dot ou da borda do ring (padrão branco)
data-sw-cursor-img
URL da imagem, quando data-sw-cursor="image"
data-sw-cursor-mix
mix-blend-mode do cursor (padrão "difference")
data-sw-cursor-lerp
suavização do seguimento, 0 a 1 — maior = mais rápido (padrão 0.16)
data-sw-cursor-hide-native
presença — oculta o cursor nativo do sistema na página inteira
data-sw-cursor-hover
em qualquer alvo (além de a/button/magnetic, que já respondem sozinhos) — faz o cursor crescer ao passar por cima
data-sw="magnetic"
no próprio elemento que vai ser atraído pelo ponteiro dentro de um raio de alcance
data-sw-strength
só em magnetic — intensidade da atração, de 0 a 1 (padrão 0.35)
data-sw="tilt"
no próprio elemento que vai inclinar em 3D
data-sw-max
só em tilt — ângulo máximo em graus (padrão 15)
data-sw="marquee"
no container — o primeiro filho é clonado e reciclado sozinho pra criar o ciclo contínuo
data-sw-speed
só em marquee — velocidade em pixels por segundo (padrão 60)
data-sw-direction="left|right"
só em marquee — sentido do movimento (padrão "left")

Variantes

Cursor contextual
um elemento segue o mouse pela tela e muda de aparência sobre alvos marcados
Botão magnético
o botão se desloca um pouco na direção do ponteiro quando ele se aproxima
Tilt (inclinação 3D)
um cartão inclina em perspectiva conforme a posição do mouse sobre ele
Marquee
faixa de texto/logos correndo continuamente, pausável no hover

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore.

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

  • Cursor customizado é sempre um "extra" visual — sem data-sw-cursor-hide-native, o cursor nativo do sistema continua funcionando por baixo, pra quem usa leitor de tela ou navegação por teclado.
  • Tilt e magnetic respondem só a mouse/caneta (pointermove) — no toque, o elemento simplesmente não inclina/desloca, sem quebrar o uso normal.
  • Só um data-sw="cursor" por página faz sentido — declarar mais de um cria vários pontos seguindo o mouse ao mesmo tempo.
← AnteriorSVG e Motion Path Próximo →Extras