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.