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