react-ai-orb !downloads

A beautiful, customizable animated orb component for React applications! Perfect for AI interfaces, assistants, interactive chatbots, or anywhere you need a glowing orb. 🔮✨

🚀 Installation

Install the package via npm:

``
npm i react-ai-orb
`

💻 Usage

`jsx
import { Orb } from "react-ai-orb";

const MyComponent = () => (
return
);
`

⚛️ Next JS

The component needs to be imported like this:
`jsx
"use client";
import { Orb } from "react-ai-orb";
`

⚙️ Props

| Prop | Type | Default | Description |
|-----------------------|-------------|-----------------|-----------------------------------------------------------------------------|
| palette | OrbPalette | cosmicNebula | Defines the color palette for the orb. Use predefined palettes or create custom ones. |
| size | number | 1 | Sets the size of the orb. |
| animationSpeedBase | number | 1 | Determines the base speed of the rotation animation. |
| animationSpeedHue | number | 1 | Sets the speed of the hue animation. |
| hueRotation | number | 120 | Adjusts the hue rotation degree for the orb colors. |
| mainOrbHueAnimation| boolean | false | Enables or disables the hue animation on the main orb. |
| blobAOpacity | number | 0.3 | Controls the opacity of blob A (range: 0 to 1). |
| blobBOpacity | number | 0.8 | Controls the opacity of blob B (range: 0 to 1). |
| noShadow | boolean | false | Disables the Orb's shadow when set to true. |

🎨 Palette

| Property | Type | Description |
|------------------|----------|-----------------------------------------------------------------------------|
| mainBgStart | string | The starting color of the orb's main background gradient. |
| mainBgEnd | string | The ending color of the orb's main background gradient. |
| shadowColor1 | string | The first shadow color applied to the orb. |
| shadowColor2 | string | The second shadow color applied to the orb. |
| shadowColor3 | string | The third shadow color applied to the orb. |
| shadowColor4 | string | The fourth shadow color applied to the orb. |
| shapeAStart | string | The starting color of shape A. |
| shapeAEnd | string | The ending color of shape A. |
| shapeBStart | string | The starting color of shape B. |
| shapeBMiddle | string | The middle color of shape B. |
| shapeBEnd | string | The ending color of shape B. |
| shapeCStart | string | The starting color of shape C. |
| shapeCMiddle | string | The middle color of shape C. |
| shapeCEnd | string | The ending color of shape C. |
| shapeDStart | string | The starting color of shape D. |
| shapeDMiddle | string | The middle color of shape D. |
| shapeDEnd | string | The ending color of shape D. |

📦 Presets

$3

`jsx
import { Orb, oceanDepthsPreset } from "react-ai-orb";

const MyComponent = () => (
return
);
`

$3

- 🪼 oceanDepthsPreset
- 🌌 galaxyPreset
- 🌊 caribeanPreset
- 🌸 cherryBlossomPreset
- ❇️ emeraldPreset
- 🦄 multiColorPreset
- ☀️ goldenGlowPreset

👨‍💻 Development

`
npx rollup -c
``

🤝 Contributing

Feel free to open issues or submit PRs for new features, bug fixes, or documentation improvements.