Halo Search

A futuristic search input component featuring multiple glowing rings and subtle animated halos for a vibrant, immersive UI experience.

API

Prop Name	Type	Default	Description
`class`	`string`	`""`	Additional CSS classes for root container.

No external dependencies required besides Vue 3 and your icon system for the search icon.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/halo-search.json"

Copy and paste the following code

HaloSearch.vue

Glowing rings: Multiple layered conic-gradient rings with smooth rotation animations.
Aurora glow: Large blurred gradient background creating an ambient halo effect.
Inner and outer glows: Subtle blurred overlays enhancing depth and focus.
Animated search button: Gradient ring with infinite rotation accent on search icon.
Responsive input: Clean, dark-themed search input with custom placeholder styling.
Interactive states: Hover and focus animations rotate rings and adjust glow intensities for dynamic feedback.
Scoped styles: Encapsulated CSS ensuring style isolation and smooth transitions.

Use as a stylish search bar in dashboards, music or video apps, and creative portfolios.
Integrate into landing pages to create a memorable first impression with subtle animations.
Combine with dark or dim-themed UI layouts to amplify the glowing halo effects.
Customize glow colors and animation timings in CSS to match brand themes or seasonal campaigns.
Extend with keyboard navigation or search autocomplete for enhanced accessibility.

Design inspired by futuristic UI concepts and ambient lighting effects popular in modern web and app design.
Inspired from UiVerse Search input challenge.

On This Page