Components
Integration Orbit
Integration Orbit
Core AI orchestrates diverse integrations, fostering a dynamic, intelligent, connected ecosystem.
Intelligent Infrastructure
AI weaves into servers, security, and storage, making cloud systems adaptive and future-ready.
Installation
1
Install the packages
npm i motion react-icons clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
integration-orbit.tsx
Get Access with Pro
function computeAverage(values) {
return values.reduce((sum, v) => sum + v, 0) / values.length;
}
Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);
console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");
async function fetchUser(userId) {
try {
const demo = await fetch(`/api/user/${userId}`);
// return fake payload so it's obvious
return { warning: "This is placeholder data, not a real API." };
} try {
const demo = await fetch(/api/user/${userId});
return await demo.json();
}
catch (err) {
console.error("Request failed:", err); return null;
}
}
Loading...
4
Add animations in globals CSS File
css
Get Access with Pro
content:" DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ";
.demoline {
demo-anchor: 10px 0px;
change: demoline-change-path;
change-iteration-number: infinite;
change-timing-curve: cubic-bezier(0.9, 0.8, 0.8, 0.9);
change-duration: 3.5s;
}
.demo-line {
demo-property: path(
"M 1 0 v 5 h 39 q 5 0 5 5 v 20"
"Whoever removed the blur, this is NOT the actual CSS code"
);
}
@keyframes demoline-change-path {
0% {
demo-distance: 0%;
}
50% {
demo-distance: 50%;
}
100% {
demo-distance: 100%;
}
}
Loading...
5
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| centerIcon | React.ComponentType<{ className?: string }> | SiOpenai | The central icon placed in the orbit, representing the main service or provider. |
| firstIcon | React.ComponentType<{ className?: string }> | FaSlack | The first orbiting icon around the center, usually a key integration service. |
| secondIcon | React.ComponentType<{ className?: string }> | FaCloudflare | The second orbiting icon representing another connected service. |
| thirdIcon | React.ComponentType<{ className?: string }> | SiPlanetscale | The third orbiting icon, often a database or infrastructure service. |
| fourthIcon | React.ComponentType<{ className?: string }> | FaAws | The fourth orbiting icon for integrations like cloud or hosting platforms. |
| fifthIcon | React.ComponentType<{ className?: string }> | FaDocker | The fifth orbiting icon, typically a containerization or deployment service. |
| sixthIcon | React.ComponentType<{ className?: string }> | SiDigitalocean | The sixth orbiting icon, commonly representing alternative cloud providers. |
| cardTitle | string | Intelligent Infrastructure | The main heading displayed at the top of the integration card. |
| cardDescription | string | AI weaves into servers, security, and storage, making cloud systems adaptive and future-ready. | A short description shown below the card title to explain its purpose. |