Sound Text

RareUI Logo

A playful typography component that plays musical notes and animates individual characters on hover.

HOVER ME & LISTEN

Installation

pnpm dlx rareui add sound-text

Usage

1

Basic Usage

Just pass text and it will play sounds on hover.

Example
import SoundText from '@/components/ui/sound-text'; export default function Header() { return ( <SoundText text="Melodic Typography" basePitch={440} // A4 Note /> ); }

Features

Seamlessly integrated and optimized for high-performance React applications.

Props

PropTypeDefaultDescription
textstring-The text to display.
basePitchnumber300Base frequency in Hertz for the starting note.
classNamestring-Classes for font styling.

“Heyy, If you made it this far, let's chat.”

Design & Developed by @heyyswap © 2026. All rights reserved.