Como ele é
Pense em fitas de ginástica rítmica presas à ponta do dedo. Por padrão são quatro fitas largas, em laranja, verde, amarelo e ciano, lado a lado, que seguem o cursor com um balanço de mola: passam um pouco do ponto e voltam. Cada uma tem a mola levemente diferente, por isso elas não andam em bloco e se separam nas curvas. As fitas são mais grossas no meio e finas nas pontas, e se recolhem quando o cursor para. Duas opções acrescentam desbotamento na cauda e uma ondulação. O fundo é transparente e o efeito ocupa só o elemento onde é colocado.
Você pode estar procurando isto se pediu algo assim
- fitas coloridas seguindo o mouse, tipo fita de ginástica
- um rastro grosso e colorido atrás do cursor no topo do site
- efeito de serpentina que vai atrás do dedo no celular
- cursor com cauda de várias cores para um site de evento
- algo bem chamativo que reaja ao mouse no portfólio
- rastro de tinta que segue o ponteiro e balança
Também chamado de
- ribbon cursor
- cursor com fitas
- ribbon trail
- WebGL cursor trail
- rastro de cursor em WebGL
- cauda de cursor
Quando usar
- Portfólios e experiências imersivas que pedem um efeito de impacto
- Topo de página de evento, festival ou marca jovem e colorida
- Áreas de destaque curtas, como uma seção de boas-vindas interativa
Quando evitar
- Páginas que já usam outro efeito em WebGL
- Páginas sóbrias, de leitura longa ou de formulário, em que as fitas distraem
- Público que acessa por celulares antigos, por ser um efeito Pesado
Como pedir para a sua IA
Crie um rastro de cursor com fitas em WebGL no hero do portfólio: fitas nas cores da minha marca seguindo o mouse e o dedo com física de mola, pausa fora da tela, carregamento sob demanda e versão estática 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 Pipa
Pipa funciona no celular?
Funciona. Pipa escuta toque e arrasto, então as fitas seguem o dedo dentro da área do componente. Por ser um efeito Pesado em WebGL no THM Componentes, o prompt orienta a IA a carregar sob demanda, usar ClientOnly com fallback estático no Nuxt e comparar LCP e INP no celular.
Como troco as cores das fitas de Pipa?
Pela prop colors, que recebe uma lista: Pipa cria uma fita para cada cor. O padrão tem quatro cores, laranja, verde, amarelo e ciano, e a demo usa uma única fita branca. Espessura, tamanho da cauda, velocidade, desbotamento e ondulação também são props, e o prompt pede os tokens de cor do projeto.
Pipa cobre a página inteira?
Não. Pipa ocupa só o contêiner em que fica e reage ao mouse apenas dentro dele, com fundo transparente. O laço de desenho do original roda sem parar, por isso o prompt do THM Componentes pede no máximo um efeito WebGL pesado por página e pausa da animação fora da viewport.
