A voice aura effect that creates a glowing aura around the screen borders when mic is toggled.
npx shadcn@latest add @refinery/voice-aura| Name | Type | Description |
|---|---|---|
| iconSize | string | Size class for the default microphone icon. |
| icon | ReactNode | Custom icon element to render inside the button. |
| buttonClassName | string | Additional CSS classes for the button. |
| buttonWrapperClassName | string | Additional CSS classes for the button wrapper. |
| overlayClassName | string | Additional CSS classes for the overlay layer. |
| auraClassName | string | Additional CSS classes for the aura gradient layer. |
| backdropClassName | string | Additional CSS classes for the backdrop layer. |
| defaultOpen | boolean | Initial open state for uncontrolled usage. |
| open | boolean | Controlled open state. |
| onOpenChangeAction | (open: boolean) => void | Callback fired when open state changes. |
Inspired from the Google Gemini Assistant glow animation, the main idea here was to create a glowing aura effect that animates around the borders of the screen when the mic is toggled on. The aura consists of multiple layers, including a spinning conic gradient and a pulsating radial gradient at the bottom to simulate sound waves. The component uses absolute positioning to layer these effects on top of each other, and CSS animations to create movement and pulsation. The glow colors are customizable via CSS variables, allowing for easy theming. The component is designed to be non-intrusive, with pointer events disabled so it doesn't interfere with user interactions while active. The mic toggle button is styled to be prominent and accessible, with clear visual feedback on hover and active states.