# Planador

Troca a setinha do sistema por um cursor próprio que desliza atrás do mouse e gira na direção do movimento.

> Planador é um componente do THM Componentes que esconde a seta do sistema e coloca no lugar um cursor próprio, preso ao mouse por uma mola. Esse cursor desliza com leve atraso, gira para apontar na direção do movimento e encolhe um pouco enquanto anda. A seta padrão pode ser trocada por qualquer componente, como o ícone da marca.

- Categoria: Botões e cursores
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue
- Interação: Mouse
- URL: https://vibecode.thmtecnologia.com/componentes/planador/

## 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, cursor que segue o mouse, 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

```text
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 Planador

### Planador funciona no celular?

No celular não existe cursor. Planador 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 em Planador?

Pode. Planador 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.

### Planador funciona com Nuxt e SSR?

Funciona, desde que rode só no navegador. Planador altera o estilo do body já na criação, 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.

## Componentes relacionados

- [Novelo](https://vibecode.thmtecnologia.com/componentes/novelo/): Um feixe de linhas finas e coloridas persegue o cursor pela tela, ondulando como fios soltos ao vento.
- [Alinhavo](https://vibecode.thmtecnologia.com/componentes/alinhavo/): Fotos que surgem uma após a outra atrás do cursor e logo somem, como um rastro de imagens.
- [Pipa](https://vibecode.thmtecnologia.com/componentes/pipa/): Fitas largas em laranja, verde, amarelo e ciano perseguem o cursor dentro da área, com balanço de mola.
- [Aquarela](https://vibecode.thmtecnologia.com/componentes/aquarela/): Rastro de tinta colorida e luminosa que escorre e se dissolve atrás do mouse, por cima da página inteira.
- [Enguia](https://vibecode.thmtecnologia.com/componentes/enguia/): Uma fita colorida, grossa na cabeça e fina na ponta, que persegue o mouse como uma serpente.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.