Voice Aura Component

Refinery

Voice Aura

Mic toggle that activates a full-screen aura glow overlay.

Preview

Click the mic to toggle the voice aura mic effect!

Installation

1. Run the following command in your terminal:

npx shadcn@latest add https://refinery.abhii.me/r/voice-aura.json

API Reference

Component props
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.
backdropClassName	string	Additional CSS classes for the backdrop layer.
defaultOpen	boolean	Initial open state for uncontrolled usage.
open	boolean	Controlled open state.
onOpenChange	(open: boolean) => void	Callback fired when open state changes.

Usage Recommendations

You can use this both in uncontrolled mode by just using the `defaultOpen` prop, or in controlled mode by managing the `open` state and responding to `onOpenChange`.

Design Notes

I made the open state work in both controlled and uncontrolled modes, and render the fixed aura overlay only when it is active. The effect comes from two layers: a backdrop that dims the page and an overlay that creates the glow. Motion animates the aura in and out, while the toggle button stays above the overlay and exposes class overrides for theming.