Tilt (3D no mouse) no SW Core — documentação e exemplos

O que é

Quando o mouse passa por cima, o elemento inclina para o lado do ponteiro, dando sensação de profundidade (como um cartão físico na mão). Quando o mouse sai, ele volta ao lugar com um leve "balanço". Fica ótimo em card de produto, capa de portfólio, cartão de plano e foto de destaque.

O SW Core mede onde o ponteiro está em relação ao centro do elemento e transforma isso em inclinação. Quanto mais perto da borda, mais inclina — até o máximo que você definir em sw-ani-max (em graus). O efeito é só de mouse: no celular, sem ponteiro, o cartão fica parado.

Quando usar

Vitrine de produtos ou portfólio: cada capa inclina ao passar o mouse, chamando para o clique.
Cartão de plano/preço em destaque: uma inclinação discreta (5 a 10 graus) dá vida sem distrair.
Foto ou ilustração do topo da página: inclinação maior para uma peça só.
Evite em listas longas (tabelas, painel administrativo): muita coisa mexendo cansa.

Comece aqui

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
Coloque sw-ani="tilt" no cartão. Passe o mouse por cima e mexa para os cantos.

Passe o mouse aqui
```
<div sw-ani="tilt" class="bg-sur bd r-m p-4">Passe o mouse aqui</div>
```
3
Quer mais ou menos inclinação? Diga o máximo em graus com sw-ani-max.

Inclina até 30°
```
<div sw-ani="tilt" sw-ani-max="30" class="bg-sur bd r-m p-4">Inclina até 30°</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.

1. Quanto ele inclina (sw-ani-max)

Passe o mouse em cada quadro e vá até os cantos. O número é o máximo em graus, de 1 a 45. Sem sw-ani-max ele usa 15.

Discreto

sw-ani-max="5" — quase imperceptível <div sw-ani="tilt" sw-ani-max="5" class="bg-sur bd r-m p-4">Discreto</div>

Equilibrado

Padrão (15°) <div sw-ani="tilt" class="bg-sur bd r-m p-4">Equilibrado</div>

Chamativo

sw-ani-max="30" — chamativo <div sw-ani="tilt" sw-ani-max="30" class="bg-sur bd r-m p-4">Chamativo</div>

Exagerado

sw-ani-max="45" — o máximo <div sw-ani="tilt" sw-ani-max="45" class="bg-sur bd r-m p-4">Exagerado</div>

2. Em que colocar

Qualquer bloco serve: foto, cartão com imagem e texto, botão grande. O que estiver dentro inclina junto.

Foto `<div sw-ani="tilt" class="r-m ov-hi"> <img src="/foto.jpg" alt="Paisagem" class="w-fl blk"> </div>`

Cartão de produto `<div sw-ani="tilt" sw-ani-max="10" class="bg-sur bd r-m ov-hi"> <img src="/produto.jpg" alt="Produto" class="w-fl blk"> <div class="p-3"> <strong>Kit Pet</strong> <div class="t-mut">R$ 89,90</div> </div> </div>`

Quero meu site

Botão grande <a href="/contato" sw-ani="tilt" sw-ani-max="20" sw-btn="pri g">Quero meu site</a>

3. Reflexo de luz (sw-ani-glare)

Um brilho branco acompanha o mouse por cima do cartão inclinado, como luz batendo num cartão plastificado. Sem valor usa força .35; com valor, de 0 a 1. Aparece melhor em foto e em cartão escuro ou colorido — sobre fundo branco, luz branca não se vê.

Com reflexo

sw-ani-glare — padrão (.35) <div sw-ani="tilt" sw-ani-glare class="bg-g-drk r-m p-4">Com reflexo</div>

Tabela de opções

Palavra	O que faz	Exemplo
Ligar
`sw-ani="tilt"`	Liga a inclinação 3D que segue o mouse.	`<div sw-ani="tilt">…</div>`
Quanto inclina
`sw-ani-max`	Inclinação máxima em graus, de 1 a 45. Padrão: 15. Valor fora dessa faixa é ignorado (volta para 15 e avisa no console).	`sw-ani-max="8"`
Reflexo
`sw-ani-glare`	Liga um brilho branco que segue o mouse por cima do cartão. Sem valor: força .35; com valor, de 0 a 1.	`sw-ani-glare="0.5"`
Avançado
`data-sw-force`	Inclina mesmo para quem ativou "reduzir movimento" no sistema (por padrão, essa pessoa não vê o efeito).	`data-sw-force`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Vitrine de produtos Ao vivo

Coleira couro

R$ 59,90

Caminha

R$ 149,90

Ração 10 kg

R$ 189,90

<div class="l l-3 gap-4">
  <div sw-ani="tilt" sw-ani-max="10" class="bg-sur bd r-m ov-hi">
    <img src="/coleira.jpg" alt="Coleira" class="w-fl blk">
    <div class="p-3"><strong>Coleira couro</strong><div class="t-mut">R$ 59,90</div></div>
  </div>
  <!-- repita para cada produto -->
</div>

Plano em destaque na tabela de preços Ao vivo

Básico

R$ 49

1 página

Mais escolhido

R$ 99

Site completo

Assinar

Loja

R$ 199

Loja virtual

<div class="l l-3 gap-4">
  <div class="bg-sur bd r-m p-4">…Básico…</div>

  <!-- só o destaque inclina -->
  <div sw-ani="tilt" sw-ani-max="8" class="bg-sur bd bd-pri r-m p-4">
    <strong class="t-pri">Mais escolhido</strong>
    <div class="t-xg fw7">R$ 99</div>
    <a href="/assinar" sw-btn="pri p">Assinar</a>
  </div>

  <div class="bg-sur bd r-m p-4">…Loja…</div>
</div>

Capa do portfólio no topo da página Ao vivo

<div sw-ani="tilt" sw-ani-max="20" class="r-m ov-hi sha-g">
  <img src="/projeto-destaque.jpg" alt="Projeto em destaque" width="520" height="320">
</div>

API (JavaScript)

SWMotion.refresh()

Se o cartão entrou na página depois que ela carregou (AJAX, JS), chame para ele ganhar o efeito. Reinicia todas as animações da página.

Precisa de quê

swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, antes do swcore.min.js.
Mouse ou caneta. Em tela de toque o efeito não aparece.

Cuidados — erros comuns

Não coloque informação importante que só aparece com o cartão inclinado: no celular ele nunca inclina.
Inclinação alta (30°+) em vários cartões lado a lado deixa a página "tremida". Na vitrine use 8 a 12; guarde o forte para uma peça só.
Se o conteúdo vazar pelas bordas ao inclinar, coloque ov-hi e r-m no cartão para recortar a imagem dentro dos cantos.
sw-ani-max acima de 45 (ou zero) não é aceito: ele volta para 15.

O que ele não faz

O reflexo (sw-ani-glare) é branco: sobre cartão branco ele não aparece. Para luz colorida, coloque um Glow num bloco dentro do cartão (glare e Glow usam a mesma camada do elemento, então não junte os dois no mesmo).
Só funciona com mouse; no celular o cartão fica parado.
Quem ativou "reduzir movimento" no sistema não vê a inclinação (a menos que você use data-sw-force).

Tilt (3D no mouse) Animações