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
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.
