Audio Reactive
NewPremiumElements that pulse and react to audio input from the microphone. Includes visualizer bars and scale effects.
effectsaudiomicrophonereactivevisualizer
Installation
Terminalbash
npx motioncraft add audio-reactiveUsage
audio-reactive.tsxtsx
import { AudioReactive } from "@/components/effects/audio-reactive";
<AudioReactive sensitivity={2}>
<h1>I pulse with sound</h1>
</AudioReactive>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Content to make reactive |
| sensitivity | number | 1.5 | Audio sensitivity multiplier |
| barCount | number | 32 | Number of visualizer bars |
| showBars | boolean | true | Show frequency bars |
| className | string | — | Additional CSS classes |
Related Components
Animated Input
Input field with animated label, focus ring, and validation states.
Custom Cursor
Custom cursor replacement with smooth trailing and hover state changes.
Fluid Cursor
NewMetaball-style cursor with trailing blobs that merge and separate. Direction-aware coloring with blend mode effects.
Magnetic Button
Button that magnetically attracts toward the cursor on hover.