Oracle Orb, animated React component

Oracle Orb: a crystal ball for AI answers. A glass sphere holds a liquid nebula of violet, pink and amber that drifts and swirls, with stars caught in it and light pooling on the floor beneath. Ask something and the orb thinks: the swirl quickens, its heart glows and a halo breathes round it. Then the answer condenses out of the mist below, word by word, sharpening from a blur. Move the pointer over the ball to tilt the nebula toward you; drag across it to stir. Keyboard: type a question and press Enter, or Tab to a suggestion.

Pro
AI Components
Hover
3D

Play with it

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

Hold your question in mind, then ask.

Props

Prop	Type	Default	What it does
onAsk	(question: string) => Promise<string> \| string	—	your assistant: return (or resolve) the answer to a question. Without it the orb answers from samples.
suggestions	string[]	SUGGEST	questions offered as chips
placeholder	string	"Ask the orb anything"	The placeholder shown in the component.
autoplay	boolean	false	Demo itself until someone touches it. Off by default.
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
Oracle Orb 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
Piano Text
Pro
New
Liquid Smoke

Oracle Orb, 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

Oracle Orb, 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