Piano Text, animated React component

Piano Text: words you can play. Every letter is a key, climbing a scale from the first letter to the last. Glide the pointer across the words and each letter you cross plays its note and dances: it's pressed down, springs up, wobbles and lands, while its neighbours sway along and it flashes its colour. The faster you glide, the louder and higher it jumps. The line underneath vibrates like a plucked string where you play, and with sound on it also traces the real waveform. Browsers keep pages silent until a click, so the first click on the words turns sound on with a run up the scale. On touch screens, drag a finger along the words. Keyboard: focus the words and press Enter to turn sound on, Arrow Left or Right to play letter by letter, or type a letter to play it.

Pro
Motion Effects
Hover
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Glide across the letters. Each one is a key.

Piano Text

Demo it by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
text	string	"Click to hear music"	the words; every letter becomes a key, spaces are rests
scale	PianoScale	"major"	the scale the letters climb, left to right
root	number	60	MIDI note of the first letter; 60 is middle C
caption	string	—	a line under the words
onNote	(index: number, midi: number) => void	—	called for every note, with the letter's index among the letters and its MIDI note
autoplay	boolean	false	Demo itself until someone touches it. Off by default. Sound plays once the page has had a click.
className	string	""	Extra classes for the outer element.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Piano Text is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Pro
New
Effort Slider
Pro
New
Aquarium Prompt
Pro
New
Oracle Orb
Pro
New
Liquid Smoke

Piano Text, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Piano Text, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More motion effects