Murmur, animated React component

Murmur: a landing screen for a writing assistant where four swallows fly around the prompt, and the whole sky is drawn live as a field of type. Each bird is built from real wing shapes, then re-read as a grid of small coloured cells that each pick a character by how much of the bird covers them, with a soft blurred shadow and drifting specks of dust. The birds wander, steer away from the screen edges, from the prompt box and from each other, flap in bursts, glide, and now and then tuck into a fast dart. Tap the sky near a bird and it startles away; send the prompt and every bird takes off at full flap while a line says what is being drafted. The prompt box is real glass over the sky, with a real textarea: Enter sends, Shift+Enter makes a new line. The drawing pauses when it is off screen or the tab is hidden, and with reduced motion the sky is drawn once and stays still.

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.

Murmur

What do you want to say?

Tap the sky near a swallow.

Murmur

Let the swallows fly

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"	"fill"	Height of the screen in px, or "fill" to fill a sized parent.
autoplay	boolean	true	Let the swallows fly. When false, or with reduced motion, the sky is drawn once and stays still.
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
Murmur 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
Loupe Lens
Pro
New
Glass Recorder
Pro
New
Effort Slider
Pro
New
Aquarium Prompt

Murmur, animated React component

Play with it

What do you want to say?

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

Murmur, animated React component

Play with it

What do you want to say?

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More ai components