react-ai-orb

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

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

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.