SWCore / Animações / Cursor personalizado

Cursor personalizado Animações

Substitui ou acompanha o cursor do sistema — ponto simples, anel elástico, ou imagem própria.

O que é

Cursor customizado que segue o mouse pela página inteira — vai no <body>, não num elemento isolado.

Como funciona

Física "elastic" faz o cursor perseguir a posição real do mouse com um pequeno atraso/esticamento (mola), em vez de colar exatamente em cima — dá uma sensação mais orgânica.

Exemplos

Como instalar (vai no <body>) Ao vivo

Este componente troca o cursor da página inteira, então não dá pra demonstrar dentro de uma caixinha sem sequestrar o seu ponteiro enquanto você lê a documentação.

O código ao lado é o que você põe no seu site.

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

<!-- tipos: dot (ponto) · ring (anel) · image (imagem sua) -->

Os atributos de configuração Ao vivo

Atenção a uma diferença fácil de errar: o tipo aceita a grafia curta sw-ani-cursor, mas as opções (imagem, tamanho, física) só funcionam na grafia data-sw-cursor-*.

Escrever sw-ani-cursor-img não dá erro — simplesmente não faz nada.

<!-- CERTO -->
<body sw-ani="cursor" sw-ani-cursor="image"
      data-sw-cursor-img="/cursor.png"
      data-sw-cursor-size="48"
      data-sw-cursor-physics="elastic"
      data-sw-cursor-hide-native>

<!-- ERRADO (ignorado em silêncio) -->
<body sw-ani="cursor" sw-ani-cursor-img="/cursor.png">

Imagem diferente por tema Ao vivo

Se o seu cursor é uma imagem escura, ela some no tema noturno. Por isso existe uma imagem alternativa só pro tema claro — e o componente troca sozinho junto com o dia/noite da página.

<body sw-ani="cursor" sw-ani-cursor="image"
      data-sw-cursor-img="/cursor-claro.png"
      data-sw-cursor-img-light="/cursor-escuro.png">

<!-- -img vale no tema escuro · -img-light vale no tema claro -->

Quando NÃO usar Ao vivo

Cursor personalizado é decisão de projeto, não enfeite: ele substitui uma convenção que o visitante já domina.

Em site de conteúdo, formulário ou painel administrativo, quase sempre atrapalha. Faz sentido em portfólio, landing de campanha e peças em que a experiência é o produto.

<!-- se usar, mantenha o feedback de clique e de link:
     o visitante precisa continuar sabendo o que é clicável -->
<body sw-ani="cursor" sw-ani-cursor="ring" data-sw-cursor-physics="elastic">

Atributos

sw-ani-cursor

o tipo do cursor: dot \| ring \| image (esta grafia curta funciona)

data-sw-cursor-img

a imagem, quando o tipo é "image"

data-sw-cursor-img-light

imagem alternativa pro tema claro

data-sw-cursor-size

tamanho do cursor

data-sw-cursor-physics

"elastic" — persegue o mouse com atraso e esticamento

data-sw-cursor-hide-native

esconde a setinha do sistema por baixo

Variantes

dot

um ponto pequeno e preciso

ring

um anel em volta do ponteiro — o mais usado

image

uma imagem sua no lugar do cursor

physics="elastic"

movimento com mola, em vez de colar no ponteiro

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 usam data-sw-cursor-*. A forma curta sw-ani-cursor-* só vale pro tipo (sw-ani-cursor="ring"); nas demais, é ignorada em silêncio.
Só faz sentido com mouse — em celular não existe ponteiro e o componente não aparece.
Esconder o cursor do sistema (data-sw-cursor-hide-native) pode prejudicar quem depende dele: garanta que o substituto seja sempre visível, inclusive sobre imagem clara.

← AnteriorGlow (segue o mouse) Próximo →Canvas (fundo generativo)