Cursor personalizado Animações

O que é

Cria um cursor desenhado que segue o mouse pela página toda. Pode ser um ponto, um anel ou uma imagem (a sua logo), pode "colar" no ponteiro ou vir atrás dele com atraso, e pode até se mover como uma mola, esticando e inclinando conforme a velocidade. Em cima de links e botões ele cresce, para mostrar que ali dá para clicar.

Você coloca sw-ani="cursor" no <body> e escolhe o tipo em sw-ani-cursor. Todas as outras opções também são sw-ani-cursor-… (tamanho, cor, imagem, física). O cursor novo só aparece em aparelho com mouse; no celular e no tablet nada muda. Por padrão a setinha do sistema continua lá, por baixo — para escondê-la, use sw-ani-cursor-hide-native.

Quando usar

• Portfólio, agência, fotógrafo, estúdio: sites em que a experiência faz parte do produto.
• Landing de campanha ou lançamento, com a logo seguindo o mouse.
• Evite em loja, formulário, painel administrativo e site de conteúdo: ali o visitante quer a setinha de sempre.

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="cursor" e o tipo no <body>. Pronto: vale para a página inteira.

   <body sw-ani="cursor" sw-ani-cursor="ring">
     …seu site…
   </body>

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.

<body sw-ani="cursor" sw-ani-cursor="ring" sw-ani-cursor-size="28" sw-ani-cursor-hide-native>

  <a href="/projeto-1" class="trabalho">…</a>   <!-- link: cresce sozinho -->
  <figure data-sw-cursor-hover>…</figure>       <!-- bloco comum: marque para crescer -->

</body>

<body sw-ani="cursor" sw-ani-cursor="image"
      sw-ani-cursor-img="/logo-clara.webp"
      sw-ani-cursor-img-light="/logo-escura.webp"
      sw-ani-cursor-size="64"
      sw-ani-cursor-physics="elastic">

<body sw-ani="cursor" sw-ani-cursor="dot"
      sw-ani-cursor-size="12"
      sw-ani-cursor-color="var(--sw-pri)"
      sw-ani-cursor-mix="normal"
      sw-ani-cursor-lerp="1">

Precisa de quê

• swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, antes do swcore.min.js.
• Mouse (ou caneta/trackpad). Em tela de toque o cursor não é criado.

Cuidados — erros comuns

• sw-ani-cursor="image" sem sw-ani-cursor-img deixa o cursor invisível. Sempre informe a imagem.
• Logo escura some no tema escuro (e clara some no claro): use sw-ani-cursor-img para o escuro e sw-ani-cursor-img-light para o claro.
• Cor diferente de branco com a mistura padrão (difference) sai com a cor "invertida". Coloque sw-ani-cursor-mix="normal".
• Se esconder a setinha do sistema (sw-ani-cursor-hide-native), garanta que o seu cursor apareça em todo fundo — senão o visitante "perde" o mouse.
• Um só por página: coloque no <body>, não em vários elementos.

O que ele não faz

• Não aparece em celular e tablet (sem mouse).
• Quem ativou "reduzir movimento" no sistema não vê o cursor personalizado (a menos que você use data-sw-force).
• Não tem como desligar por JavaScript depois de ligado: para tirar, recarregue a página sem o atributo.