Como ele é
Ao carregar a página, a seta comum some e uma seta de pontas arredondadas, desenhada em SVG, cresce do zero até o tamanho normal. Ela acompanha o mouse como se estivesse presa por um elástico macio: chega um instante depois, sem quicar. Quando a pessoa move o mouse, a ponta gira para apontar para onde ele vai, e a seta encolhe levemente durante o movimento, voltando ao tamanho cheio logo depois. A cor segue a do texto ao redor, então acompanha o tema claro ou escuro do site.
Você pode estar procurando isto se pediu algo assim
- trocar a setinha do mouse por um cursor mais bonito
- cursor personalizado com o ícone da minha marca
- um cursor que vai atrás do mouse meio atrasado, bem suave
- seta do mouse que gira para o lado que estou mexendo
- deixar o site com cara de produto caro usando um cursor próprio
- aquele cursor diferente de sites de agência e portfólio
Também chamado de
- custom cursor
- cursor personalizado
- smooth cursor
- cursor com mola
- spring cursor
- follow cursor
Quando usar
- Sites institucionais premium que querem um cursor com a cara da marca
- Portfólios e páginas de agência em que o detalhe de interação conta
- Landings de lançamento com pouco texto e poucos formulários
Quando evitar
- Sistemas, painéis e formulários, em que a seta do sistema é mais previsível
- Públicos com baixa visão, que costumam aumentar o cursor do sistema nas configurações
- Sites acessados quase só pelo celular, onde não existe cursor
Como pedir para a sua IA
Substitua a seta do mouse por um cursor personalizado que segue o ponteiro com física de mola e gira na direção do movimento, usando o ícone da minha marca, desligado em telas de toque e com versão sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Smooth Cursor
O Smooth Cursor funciona no celular?
No celular não existe cursor. O Smooth Cursor só escuta o movimento do mouse, então em telas de toque a seta apenas se desloca até o ponto tocado. Vale exibir o componente só em aparelhos com mouse e manter a seta do sistema nos demais; o prompt do THM Componentes pede teste em mobile.
Posso usar o logo da marca no Smooth Cursor?
Pode. O Smooth Cursor recebe pela prop cursor qualquer componente Vue para substituir a seta padrão, como um logo em SVG, um círculo ou um ícone. A mola que guia a posição também é ajustável pela prop springConfig, com amortecimento, rigidez e massa.
O Smooth Cursor funciona com Nuxt e SSR?
Funciona, desde que rode só no navegador. O Smooth Cursor altera o estilo do body assim que é criado, para esconder a seta do sistema, e isso exige o objeto document. Em Nuxt, coloque o componente dentro de ClientOnly ou use um arquivo .client.vue.
