# Novelo Um feixe de linhas finas e coloridas persegue o cursor pela tela, ondulando como fios soltos ao vento. > Novelo é um componente do THM Componentes que desenha um feixe de linhas finas atrás do cursor. Cada linha é presa por molas e segue o ponteiro com atraso, ondulando nas curvas, enquanto a cor passa devagar do azul ao violeta e ao rosa. Usa Canvas 2D e combina com sites autorais, portfólios e landings criativas. - Categoria: Botões e cursores - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/novelo/ ## 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 ```text 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. ## Componentes relacionados - [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. - [Planador](https://vibecode.thmtecnologia.com/componentes/planador/): Troca a setinha do sistema por um cursor próprio que desliza atrás do mouse e gira na direção do movimento. - [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. --- 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.