Skip to main content

​
Overview

SoundText renders individual characters as interactive elements: hovering over each letter triggers a unique sine-wave tone generated via the Web Audio API, mapped to a pentatonic scale for a melodic effect. The character jumps, scales up, and glows purple in sync with the sound.
This component uses the Web Audio API. Audio is initialized on first user interaction to comply with browser autoplay policies. No microphone access is required — all audio is synthesized client-side.

​
Installation

npx rareui@latest add sound-text
Requires framer-motion as a peer dependency.
npm install framer-motion

​
Usage

import SoundText from "@/components/rareui/Text Animation/SoundText";

export default function Hero() {
  return (
    <SoundText
      text="Music to my ears"
      className="text-6xl font-bold"
    />
  );
}

​
Props

​
text
string
default:"Hover over me"
The text content to display. Each non-space character becomes an independent interactive letter.
​
basePitch
number
default:"300"
The root frequency in Hz for the pentatonic scale. Each character’s pitch is derived by multiplying this value by a scale ratio based on its index position. Higher values produce higher-pitched tones.
​
className
string
Additional Tailwind or CSS classes applied to the wrapper element. Use to control font size, color, and layout.

​
Examples

​
Default usage

<SoundText
  text="Hover to play!"
  className="text-5xl font-bold"
/>

​
Lower pitch, bass tones

<SoundText
  text="Deep bass"
  basePitch={150}
  className="text-6xl font-black"
/>

​
Higher pitch, bright tones

<SoundText
  text="High notes"
  basePitch={500}
  className="text-4xl tracking-widest"
/>

​
Features

Web Audio API

Uses native browser audio synthesis — no audio files or external libraries required.

Pentatonic Scale

Each character maps to a harmonious frequency in a pentatonic scale, creating pleasant melodic interactions.

Spring Animations

Characters bounce upward, scale, and glow purple on hover using Framer Motion spring physics.

Lazy Audio Init

The AudioContext is created on first user interaction, ensuring compliance with browser autoplay policies.

Build docs developers (and LLMs) love

Get started for freeTalk to us