# Coruja A dark search field wrapped in blue and magenta light rings that rotate when you hover and click. > Coruja is a THM Componentes component that turns the search field into a centerpiece. A dark input is wrapped in layers of blue and magenta glow, made with CSS only, that slide around the border on hover and make a full turn on focus. It suits portal searches and AI apps where search is the main action. - Category: Forms and input - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/coruja/ ## What it looks like Picture a black search field with a neon halo. Around it sit several stacked, blurred borders with streaks of deep blue, purple and magenta that seem to leak from behind the field, plus a wider, softer glow outside. On hover, the streaks slide around the border in about two seconds; when you click to type, they make a full, slower turn. The magnifier square on the right has a gray glint that spins nonstop. The text is white and the field is about 300 pixels wide. ## You may be looking for this if you asked for something like - “a search field with a glowing neon border” - “a futuristic search bar for the top of my AI app” - “a search box with colored light spinning around it when I click” - “a dark search input with a purple and pink glow” - “make my site search look like a tech product” - “that search field with a rotating halo, cyberpunk style” ## Also known as glowing search input, neon search bar, animated search input, halo input, conic gradient border, glowing ring search ## When to use - A featured search on the home page of an AI app - Dark-themed portals and directories where search is the main action - Tech product landing pages with a futuristic look ## When to avoid - Light-themed sites, since the field and its colors are dark and fixed - Narrow navigation bars, because of the fixed width of about 300 px ## How to ask your AI ```text Create a search input with conic-gradient glowing rings around the border that rotate on hover and focus, in my brand colors: fluid width on mobile, an accessible label, submit on Enter and a non-animated version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Coruja ### Does Coruja actually run a search? No. In its original form, Coruja is visual only: the input has no v-model or submit event, and the magnifier is an icon, not a button. Ask your AI to connect the field to your search with v-model, submit on Enter and a real button for the magnifier, plus a label for screen readers. ### Does Coruja work on phones? Yes: tapping the field triggers the ring rotation through focus, with no hover needed. The catch is the fixed 301 pixel width of Coruja, which gets tight on very narrow screens; the THM Componentes prompt asks for mobile testing and an LCP and INP comparison. ### Can I use Coruja on a light site? Yes, with adjustments. Coruja has a near-black background and colors fixed in its CSS, designed for dark pages. The THM Componentes prompt tells your AI to swap those colors for your project tokens, and the conic gradient of each ring accepts your brand colors. ## Related components - [Apagador](https://vibecode.thmtecnologia.com/en/components/apagador/): A pill-shaped field with hints that slide up and rotate; on submit, the typed text crumbles into dust. - [Tocha](https://vibecode.thmtecnologia.com/en/components/tocha/): A text field whose border lights up in blue right where the cursor passes, like a small flashlight on the frame. - [Trevo](https://vibecode.thmtecnologia.com/en/components/trevo/): A search box that opens with Ctrl K or ⌘K to find pages and run actions without leaving the keyboard. - [Mote](https://vibecode.thmtecnologia.com/en/components/mote/): An AI app message box that grows with the text, takes files, records audio and opens commands when you type a slash. - [Fogo-fátuo](https://vibecode.thmtecnologia.com/en/components/fogo-fatuo/): A colored glow slowly drifts along the border of a card or input, lighting up one stretch and then another. - [Rodopio](https://vibecode.thmtecnologia.com/en/components/rodopio/): A thin border with blue and pink light spinning around a field or button, like a neon sign. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).