Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-ai-orb

Steve0929960MIT1.0.13TypeScript support: included

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

react ai orb, react ai sphere, react animated orb, react siri component, orb, ai, 3d, sphere, siri, ai-animation, animated-orb, interactive-orb, visual-effects, 3d-graphics, react-orb, react-3d, ai-visualization, react-component, shader, gradient-animation, react-ai, 3d-sphere, react-animation, 3d-orb

readme

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

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.