react-ai-orb 
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
import { Orb } from "react-ai-orb";
const MyComponent = () => (
return <Orb />
);
⚛️ Next JS
The component needs to be imported like this:
"use client";
import { Orb } from "react-ai-orb";
⚙️ Props
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
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

Preset Usage
import { Orb, oceanDepthsPreset } from "react-ai-orb";
const MyComponent = () => (
return <Orb {...oceanDepthsPreset} />
);
Included Presets
- 🪼
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.