# Rodopio Uma borda fina com luz azul e rosa que gira em volta do campo ou do botão, como um letreiro de neon. > Rodopio é um componente do THM Componentes que envolve um campo, um botão ou um card com uma borda fina de luz neon em duas cores, azul e rosa por padrão, que gira em volta. Usa só CSS, tem três modos, um deles parado, e combina com temas noturnos e visuais gamer. - Categoria: Efeitos especiais - 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 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/rodopio/ ## Como ele é Pense na luz de um letreiro de neon correndo pela moldura de uma caixa. Um fio de um pixel contorna o conteúdo, e duas manchas de luz levemente desfocadas, uma azul e outra rosa avermelhada, giram ao redor dele, completando uma volta a cada 6 segundos. Há três modos: parado, com cada cor fixa numa ponta; metade, o padrão, com manchas que giram; e cheio, com mais luz cobrindo a borda. O conteúdo, como um campo de texto, fica por cima e cobre o centro. O tamanho padrão é o de um campo de formulário. ## Você pode estar procurando isto se pediu algo assim - “borda brilhando em volta do campo de busca, tipo neon” - “luz azul e rosa correndo em volta do botão” - “contorno neon girando para um site com tema gamer” - “deixar o input com cara de letreiro luminoso” - “borda animada colorida para destacar um card no modo escuro” - “aquele brilho que fica rodando na borda, estilo setup gamer” ## Também chamado de borda neon, luz girando na borda, glowing border, borda animada, rotating border, borda com brilho, animated gradient border ## Quando usar - Campo de busca ou de inscrição que precisa chamar atenção - Sites com tema noturno, gamer ou de tecnologia - Botão ou card de destaque numa página escura - Formulário curto de captura numa página de lançamento ## Quando evitar - Vários elementos na mesma tela, em que tanta luz girando cansa - Marcas sóbrias, como saúde ou jurídico, sem suavizar as cores ## Como pedir para a sua IA ```text Quero uma borda neon animada em CSS em volta do campo de busca do topo do site: duas luzes nas cores da minha marca girando em volta, com brilho suave, versão parada para quem prefere menos movimento e bom contraste no modo escuro. ``` 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 Rodopio ### Dá para deixar a borda de Rodopio parada? Sim. Rodopio tem o modo none, em que a borda fica parada, com uma cor em cada ponta. Esse modo funciona como versão estática para quem prefere menos movimento, que é justamente o que o prompt do THM Componentes pede à IA para essa preferência. Os modos half e full giram. ### Como trocar as cores e a velocidade de Rodopio? As duas cores de Rodopio são props, color1 e color2, e aceitam qualquer cor CSS. A duração de cada volta é a prop duration, em segundos, com 6 por padrão. O prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto no lugar do azul e do rosa. ### Preciso configurar algo no CSS para Rodopio girar? Sim. A animação de giro de Rodopio é declarada no tema do Tailwind, no main.css, e lê a duração por uma variável CSS. A página do componente traz o trecho pronto, e o prompt do THM Componentes pede à IA que adicione as variáveis de tema do catálogo. Sem isso, a borda aparece, mas não gira. ## Componentes relacionados - [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. - [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. - [Pavio](https://vibecode.thmtecnologia.com/componentes/pavio/): Cartão com um feixe de luz que dá voltas pela borda e um brilho suave que acompanha o mouse por dentro. - [Cata-vento](https://vibecode.thmtecnologia.com/componentes/cata-vento/): Botão com uma borda fina de arco-íris que gira sem parar em volta do texto, com leve desfoque. - [Girassol](https://vibecode.thmtecnologia.com/componentes/girassol/): Quando o mouse chega perto de um card, um arco de luz colorida acende na borda e gira para apontar o cursor. - [Arrebol](https://vibecode.thmtecnologia.com/componentes/arrebol/): Botão escuro com as cores do arco-íris correndo pela borda inferior e um reflexo colorido desfocado logo abaixo. --- 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.