Como ele é
Pense num campo de busca preto com uma auréola de neon. Em volta dele há várias bordas sobrepostas e desfocadas, com faixas de azul profundo, roxo e magenta que parecem escapar por trás do campo, e um brilho mais largo e suave por fora. Ao passar o mouse, as faixas deslizam ao redor da borda em cerca de dois segundos; ao clicar para digitar, dão uma volta completa, mais devagar. O quadrado com a lupa, à direita, tem um brilho cinza girando sem parar. O texto é branco e o campo mede cerca de 300 pixels de largura.
Você pode estar procurando isto se pediu algo assim
- campo de busca com borda brilhando tipo neon
- barra de pesquisa futurista para o topo do meu app de IA
- busca com luz colorida girando em volta quando clico
- input de pesquisa escuro com brilho roxo e rosa
- deixar a busca do site com cara de produto de tecnologia
- aquele campo de busca com auréola que gira, estilo cyberpunk
Também chamado de
- glowing search input
- busca com brilho
- neon search bar
- campo de busca animado
- animated search input
- halo input
- borda com gradiente cônico
Quando usar
- Busca em destaque na página inicial de um app de IA
- Portais e diretórios com fundo escuro em que a busca é a ação principal
- Landings de produto de tecnologia com estética futurista
Quando evitar
- Sites de tema claro, já que o campo e as cores são escuros e fixos
- Barras de navegação estreitas, por causa da largura fixa de cerca de 300 px
Como pedir para a sua IA
Crie um campo de busca com anéis de brilho em gradiente cônico ao redor da borda, que giram no hover e no foco, nas cores da minha marca: largura fluida no celular, rótulo acessível, envio com Enter e versão sem animação 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 Coruja
Coruja já faz a busca?
Não. Na versão original, Coruja é só visual: o input não tem v-model nem evento de envio, e a lupa é um ícone, não um botão. Peça à IA para ligar o campo à sua busca, com v-model, envio pelo Enter e um botão real para a lupa, além de um rótulo para leitores de tela.
Coruja funciona no celular?
Funciona: ao tocar no campo, o foco dispara a volta dos anéis, sem depender de hover. O ponto de atenção é a largura fixa de 301 pixels de Coruja, que aperta em telas muito estreitas; o prompt do THM Componentes pede teste em mobile e comparação de LCP e INP.
Dá para usar Coruja em site claro?
Dá, com ajustes. Coruja tem fundo quase preto e cores fixas no CSS, pensadas para páginas escuras. O prompt do THM Componentes orienta a IA a trocar essas cores pelos tokens do projeto, e o gradiente cônico de cada anel aceita as cores da sua marca.
