Sound Text

Auto-generate your docs

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

pnpm dlx rareui@latest add sound-text

yarn dlx rareui@latest add sound-text

bunx 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

string

default:"Hover over me"

The text content to display. Each non-space character becomes an independent interactive letter.

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.

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.

⌘I

Buttons

Cards & Overlays

Navigation

Text Animation

Interactive Backgrounds

3D Elements

Sections

Overview

Installation

Usage

Props

Examples

Default usage

Lower pitch, bass tones

Higher pitch, bright tones

Features

Web Audio API

Pentatonic Scale

Spring Animations

Lazy Audio Init

​Overview

​Installation

​Usage

​Props

​Examples

​Default usage

​Lower pitch, bass tones

​Higher pitch, bright tones

​Features

Web Audio API

Pentatonic Scale

Spring Animations

Lazy Audio Init

Overview

Installation

Usage

Props

Examples

Default usage

Lower pitch, bass tones

Higher pitch, bright tones

Features