# Pavio Cartão com um feixe de luz que dá voltas pela borda e um brilho suave que acompanha o mouse por dentro. > Pavio é um componente exclusivo do THM Componentes: um cartão em que um feixe de luz em gradiente dá voltas pela borda enquanto um brilho suave segue o cursor por dentro. Usa CSS, com JavaScript só para o cursor e para pausar fora da tela, tem peso Leve e destaca o plano recomendado de uma página de preços. - Categoria: Efeitos especiais - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/pavio/ ## Como ele é Imagine um cartão branco de cantos arredondados com uma borda fina por onde corre um risco de luz, como os LEDs que dão a volta num letreiro. O feixe vai do índigo na cauda ao ciano na ponta, tem cerca de 70 graus de comprimento e completa uma volta a cada 6 segundos, com um halo desfocado logo por fora e por dentro da borda. Quando o mouse passa por cima, uma luz suave na cor do feixe acompanha o ponteiro dentro do cartão. O conteúdo padrão é um plano de preço de exemplo, que você troca pelo seu. ## Você pode estar procurando isto se pediu algo assim - “uma luz passando pela borda do card do plano mais vendido” - “card de preço com a borda brilhando e girando” - “contorno de luz andando em volta de um cartão, meio neon” - “destacar o plano recomendado na página de preços sem exagerar” - “card que acende onde o mouse passa por cima” - “borda animada em gradiente para chamar atenção para uma oferta” - “aquele efeito de borda iluminada que aparece em sites de SaaS” ## Também chamado de borda animada, feixe na borda, animated border, glowing border card, conic gradient border, luz correndo na borda, brilho que segue o mouse ## Quando usar - Plano recomendado numa tabela de preços, ao lado de cartões sem efeito - Cartão de oferta ou de cupom que precisa se destacar na página - Chamada para um recurso novo dentro de um painel ou de uma landing page - Convite para teste grátis no fim de uma página de vendas ## Quando evitar - Grades com muitos cartões iguais, em que o feixe perde a função de destaque - Sites de fundo escuro, sem antes trocar o fundo branco fixo do cartão ## Como pedir para a sua IA ```text Crie um card com borda animada para o plano recomendado da minha página de preços: um feixe de luz em gradiente nas cores da minha marca percorrendo a borda e um brilho suave seguindo o cursor, com pausa fora da tela e borda parada para quem prefere menos movimento. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Pavio ### Pavio deixa a página pesada? Não. Pavio tem peso Leve no THM Componentes: o feixe é um gradiente cônico animado em CSS, e o JavaScript só acompanha o cursor e pausa a animação quando o cartão sai da tela. Mesmo assim, use em um ou dois cartões por página, para que o destaque continue valendo. ### Dá para trocar as cores e o conteúdo de Pavio? Sim. Pavio recebe por props as cores da cauda e da ponta do feixe, a duração da volta, o comprimento do feixe, a espessura da borda, o raio dos cantos e a largura, e o prompt orienta a IA a usar os tokens de cor do projeto. O seu conteúdo vai no slot, no lugar do plano de exemplo. ### Pavio respeita quem prefere menos movimento? Sim. Com a preferência de movimento reduzido ativa no sistema, Pavio desliga a animação e deixa o feixe parado num ponto fixo da borda, mantendo o destaque. O brilho que segue o cursor continua funcionando, porque só aparece enquanto a pessoa move o mouse sobre o cartão. ## Componentes relacionados - [Satélite](https://vibecode.thmtecnologia.com/componentes/satelite/): Um pequeno feixe de luz colorida dá voltas pela borda de um card ou seção, como um cometa contornando a moldura. - [Fogo-fátuo](https://vibecode.thmtecnologia.com/componentes/fogo-fatuo/): Um brilho colorido passeia devagar pela borda de um card ou campo, acendendo um trecho e depois outro. - [Rodopio](https://vibecode.thmtecnologia.com/componentes/rodopio/): Uma borda fina com luz azul e rosa que gira em volta do campo ou do botão, como um letreiro de neon. - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. - [Pódio](https://vibecode.thmtecnologia.com/componentes/podio/): Cartões de planos lado a lado com troca entre mensal e anual, plano em destaque e comparação completa de recursos. - [Furta-cor](https://vibecode.thmtecnologia.com/componentes/furta-cor/): Cartão com arte que inclina em 3D sob o mouse e brilha com reflexo arco-íris, como uma carta colecionável rara. --- 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.