1.0.13 • Published 5 months ago
react-ai-orb v1.0.13
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. 🔮✨
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
| 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
const MyComponent = () => ( return <Orb {...oceanDepthsPreset} /> );
### Included Presets
- 🪼 `oceanDepthsPreset`
- 🌌 `galaxyPreset`
- 🌊 `caribeanPreset`
- 🌸 `cherryBlossomPreset`
- ❇️ `emeraldPreset`
- 🦄 `multiColorPreset`
- ☀️ `goldenGlowPreset`
## 👨💻 Developmentnpx rollup -c
## 🤝 Contributing
Feel free to open issues or submit PRs for new features, bug fixes, or documentation improvements.