# Coruja

Campo de busca escuro cercado por anéis de luz azul e magenta que giram ao passar o mouse e ao clicar.

> Coruja é um componente do THM Componentes que transforma o campo de busca em peça de destaque. Um campo escuro fica cercado por camadas de brilho azul e magenta, feitas só com CSS, que giram pela borda ao passar o mouse e dão uma volta completa no foco. Serve para buscas de portal e apps de IA.

- Categoria: Formulários e entrada
- 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: Mouse, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/coruja/

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

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

## Componentes relacionados

- [Apagador](https://vibecode.thmtecnologia.com/componentes/apagador/): Campo em pílula com dicas que sobem e se alternam; ao enviar, o texto digitado se desfaz em pó.
- [Tocha](https://vibecode.thmtecnologia.com/componentes/tocha/): Campo de texto cuja borda acende em azul no ponto por onde o cursor passa, como uma lanterna na moldura.
- [Trevo](https://vibecode.thmtecnologia.com/componentes/trevo/): Uma janela de busca que abre com Ctrl K ou ⌘K para achar páginas e executar ações sem tirar as mãos do teclado.
- [Mote](https://vibecode.thmtecnologia.com/componentes/mote/): Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra.
- [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.

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