Glass Recorder, animated React component

Glass Recorder: a voice button for AI apps, made of liquid glass that really bends the light behind it. Bring the pointer near and the drop swells out towards it like a liquid drawn to a finger; press and it squashes and turns milky, then spreads into a bar while a glass knob buds from its end to hold stop. Your voice pours in as glowing liquid that rises and ripples as you talk. Tap stop and the knob pinches off and floats away carrying your recording's length. With the microphone allowed it follows your voice (it only measures loudness and tone, and keeps nothing); otherwise it plays a sample voice. Keyboard: it is one real button, so Space or Enter records and stops, with the status spoken to screen readers.

Pro
AI Components
Hover
Spring

Play with it

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

Glass Recorder

Demo it by itself

Icon colour

Voice

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
height	number \| "fill"	420	Height of the scene in px, or "fill" to fill a positioned parent.
barWidth	number	340	Width of the glass bar while recording, in px. It never grows past 86% of the scene.
barHeight	number	80	Height of the glass bar while recording, in px. The resting drop is a little larger.
listen	"microphone" \| "simulate"	"microphone"	"microphone" listens after a tap and falls back to a sample voice if it is blocked or missing; "simulate" always uses the sample voice.
backdrop	string	—	An image for the glass to sit on (it must allow cross-origin use). Without one it sits on moving satin.
scene	string[]	—	Five colours for the satin behind the glass.
colors	string[]	—	Four colours for the light your voice pours into the glass, from the low end of the bar to the high end.
ink	"white" \| "dark"	"white"	Icon and timer colour: white over a dark or colourful backdrop, dark over a light one.
autoplay	boolean	false	Demo itself, with a pointer, until the first touch. Off by default.
onStart	() => void	—	Called when recording starts.
onStop	(seconds: number) => void	—	Called with how many seconds were recorded.
onMicrophoneError	(error: unknown) => void	—	Called if the microphone cannot be opened.
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
Glass Recorder 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
Murmur
Pro
New
Loupe Lens
Pro
New
Effort Slider
Pro
New
Aquarium Prompt

Glass Recorder, 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

Glass Recorder, 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 ai components