Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Voice Morph, animated React component

A voice-message button whose glyph takes itself apart to do the job. Tap the mic and its head splits into five bars that spread into a live waveform while the stand folds away; the button turns red and a timer runs. Tap again and the bars pack themselves into the send arrow: three become its shaft and wings, the other two fold away, the button turns blue and the arrow shoots up out of it as the message lands in the thread. Then the mic rises back into place. Escape cancels a recording. The loudness is simulated, so it needs no microphone; it is decoration over a plain button.

  • Pro
  • AI Components
  • Spring

A rising bloop as the mic splits open, a click as the bars snap into the arrow, and a whoosh with two bright notes as the message sends. Sound is off on this site until you switch it on.

Play with it

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

Running five minutes late, save me a seat?

Message

Props

PropTypeDefaultWhat it does
placeholderstring"Message"What the field says before anyone records.
incomingstring"Running five minutes late, save me a seat?"A message already in the thread, from the other person.
onSend(seconds: number, levels: number[]) => void—Called with the length and a loudness trace (0 to 1, ten a second) when a voice message is sent.
maxSecondsnumber60Recording stops and sends by itself at this length.
enableSoundbooleantrueA rising bloop as the mic opens and a whoosh as the arrow sends. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseRecords and sends a message by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 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. 2

    Connect the registry with your API key

    Voice Morph 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}"
    }
  }
}

How Voice Morph works

A voice-message button whose glyph takes itself apart to do the job. button turns red and a timer runs. Tap again and the bars pack themselves into the send arrow: three of them become its shaft and wings, the other two fold away, the button turns blue, and the arrow shoots up out of it as the message lands in the thread. The mic then rises back into place. Escape cancels a recording.

The source, the install command and the build prompt come with Pro.

Voice Morph questions

Does it make sound, and how do I turn it off?

A rising bloop as the mic splits open, a click as the bars snap into the arrow, and a whoosh with two bright notes as the message sends. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More ai components