Como ele é
Imagine vinte fios de linha bem finos amarrados na ponta da seta do mouse. Quando o cursor anda, os fios vêm atrás com um pequeno atraso, se curvam a cada mudança de direção e se juntam de novo quando ele para. As linhas são semitransparentes e somam brilho onde se cruzam, e o tom muda lentamente num ciclo entre azul, violeta, rosa e vermelho. O canvas cobre a tela inteira por cima do conteúdo, mas não bloqueia cliques. No celular, o rastro aparece quando a pessoa desliza o dedo.
Você pode estar procurando isto se pediu algo assim
- linhas coloridas seguindo o mouse pela tela inteira
- um rastro de fios que vai atrás do cursor
- efeito de cursor com fios de seda para o meu portfólio
- algo que deixe o mouse com cara de site de agência de design
- rastro do mouse que ondula e muda de cor sozinho
- cursor que deixa um risco brilhante quando mexo
- aquelas linhas que perseguem a seta em sites premiados
Também chamado de
- cursor trail
- rastro de cursor
- line cursor
- spring trail
- linhas com física de mola
- mouse trail effect
Quando usar
- Portfólio de designer, ilustrador ou estúdio que quer um toque autoral
- Landing de design ou de evento criativo com pouco texto
- Seções de apresentação curtas, em que mexer o mouse faz parte da experiência
Quando evitar
- Painéis, formulários e páginas de leitura, em que linhas sobre o texto distraem
- Páginas com outras animações pesadas, já que o laço de desenho segue ativo com o mouse parado
Como pedir para a sua IA
Adicione um rastro de cursor com linhas finas e física de mola, em Canvas 2D, cobrindo a tela sem bloquear cliques: cores da minha marca, versão estática para quem prefere menos movimento, carregamento só no navegador e teste no celular.
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 Novelo
Novelo funciona no celular?
Funciona com o dedo: Novelo escuta o toque e começa a desenhar quando a pessoa encosta e desliza na tela. Como o celular não tem cursor, o rastro se forma enquanto o dedo se move e se recolhe quando ele para. O prompt do THM Componentes pede teste em mobile e comparação de LCP e INP.
Dá para trocar as cores de Novelo?
Dá, com um ajuste no código. No original, Novelo calcula o tom por uma onda que percorre azul, violeta, rosa e vermelho. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto, sem cores fixas, e a quantidade de linhas, o atrito e a tensão já são props.
Novelo pesa no desempenho?
Tem classificação Médio no THM Componentes. Novelo redesenha vinte linhas de cinquenta pontos a cada quadro em Canvas 2D, e o laço continua com o mouse parado. Vale reduzir as props trails e size em aparelhos fracos, carregar sob demanda dentro de ClientOnly no Nuxt, como o prompt pede, e medir o INP.
