Sound Text
An interactive text animation that plays generated audio frequencies on hover.
Music to my ears
Installation
pnpm dlx rareui add sound-text
Usage
Usage
1
Import the component
import SoundText from "@/components/rareui/SoundText";
2
Use in your application
export default function MyComponent() {
return (
<SoundText
text="Hover to play!"
className="text-5xl font-bold"
/>
);
}
Features
Generates real-time audio frequencies on hover.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Hover over me" | The text content to display. |
basePitch | number | 300 | The base frequency in Hz for generating sound scale. |
className | string | - | Additional styles for the container. |