Voice orbNew

Voice assistant card with a swirling sphere of particles, each with its own speed and size, that surge out from the centre and back while the call is live, and a Start talking / End call button.

Installation

Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.

$pnpm dlx shadcn@latest add @nextui/voice-orb

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

Usage

1"use client";
2
3import { useState } from "react";
4import { VoiceOrb } from "@/components/nextui/voice-orb";
5
6export function Example() {
7  const [live, setLive] = useState(false);
8
9  return (
10    <VoiceOrb
11      active={live}
12      onActiveChange={(next) => {
13        setLive(next);
14        // start or stop your voice session here
15      }}
16    />
17  );
18}

API reference

Edit props live in the preview above, or see all 6 props

Prop	Type	Default	Description
title	ReactNode	"Voice assistant"	Heading at the top of the card
active	boolean	–	Controlled call state; leave out to let the card manage it
defaultActive	boolean	false	Starting call state when uncontrolled
onActiveChange	(active: boolean) => void	–	Called when Start talking or End call is pressed
level	number	–	Live voice level from 0 to 1, e.g. from an AnalyserNode; leave out for a simulated voice
className	string	–	Extra class on the card

How it works

The orb is drawn on a canvas in the text color, so it follows light and dark themes
Particles spread over a sphere that slowly swirls; each one has its own orbit speed, size and breathing pace
At rest they breathe gently in and out. During a call they surge out from the centre and back with the voice, in waves that start at the core
ParticleOrb is exported on its own if you only want the animation
Reduced motion shows a still frame, and the animation pauses while off screen

All components

Chat inputNew

Task checklistNew

ReasoningNew

Installation

$pnpm dlx shadcn@latest add @nextui/voice-orb

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

Usage

1"use client";
2
3import { useState } from "react";
4import { VoiceOrb } from "@/components/nextui/voice-orb";
5
6export function Example() {
7  const [live, setLive] = useState(false);
8
9  return (
10    <VoiceOrb
11      active={live}
12      onActiveChange={(next) => {
13        setLive(next);
14        // start or stop your voice session here
15      }}
16    />
17  );
18}

API reference

Edit props live in the preview above, or see all 6 props

Prop	Type	Default	Description
title	ReactNode	"Voice assistant"	Heading at the top of the card
active	boolean	–	Controlled call state; leave out to let the card manage it
defaultActive	boolean	false	Starting call state when uncontrolled
onActiveChange	(active: boolean) => void	–	Called when Start talking or End call is pressed
level	number	–	Live voice level from 0 to 1, e.g. from an AnalyserNode; leave out for a simulated voice
className	string	–	Extra class on the card

How it works

The orb is drawn on a canvas in the text color, so it follows light and dark themes
Particles spread over a sphere that slowly swirls; each one has its own orbit speed, size and breathing pace
At rest they breathe gently in and out. During a call they surge out from the centre and back with the voice, in waves that start at the core
ParticleOrb is exported on its own if you only want the animation
Reduced motion shows a still frame, and the animation pauses while off screen

Chat inputNew

Task checklistNew

ReasoningNew

Voice orbNew

Installation

Usage

API reference

How it works

Related

Voice orbNew

Installation

Usage

API reference

How it works

Related