Integration Orbit Hub
A free animated integration section with readable orbiting product connections.
Works with your stack
One product, connected to every team
Bring the tools that already run your company into one calm operating layer.
Explore all integrationsEmpire OS
Your shared product context
- NotionKeep plans and operating context in sync.
- FigmaCarry approved design decisions into delivery.
- StripeBring billing events into one product view.
- HubSpotConnect product activity with customer context.
- VercelFollow deployments from preview to production.
Customise
Code
<IntegrationOrbitHub
title="One product, connected to every team"
hub={{ label: "Empire OS", description: "Your shared product context" }}
items={[
{ id: "linear", label: "Linear", href: "/integrations/linear" },
{ id: "slack", label: "Slack", href: "/integrations/slack" },
{ id: "github", label: "GitHub", href: "/integrations/github" },
{ id: "notion", label: "Notion", href: "/integrations/notion" },
]}
/>Integration Orbit Hub is a free integration section for Next.js and React, styled with Tailwind. It places a central product inside one to three orbit tracks while keeping every integration in semantic list markup with optional real links.
Motion rotates one value per ring and counter-rotates each node from the same value, so labels and focus rings stay upright without per-frame React renders. Hover, focus, offscreen and hidden-tab states pause the rings, while mobile and reduced-motion users receive a complete static grid.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/integration-orbit-hubUsage
import { IntegrationOrbitHub } from "@/components/integration-orbit-hub";
const integrations = [
{ id: "linear", label: "Linear", href: "/integrations/linear" },
{ id: "slack", label: "Slack", href: "/integrations/slack" },
{ id: "github", label: "GitHub", href: "/integrations/github" },
{ id: "notion", label: "Notion", href: "/integrations/notion" },
];
export function Example() {
return (
<IntegrationOrbitHub
title="One product, connected to every team"
hub={{ label: "Empire OS", description: "Your shared product context" }}
items={integrations}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Works with your stack" | Introductory label above the section heading. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting section copy. |
| cta | { label: string; href: string } | undefined | Optional call to action rendered as a real anchor. |
| hub | { label: string; description?: string } | required | Central product node and its supporting description. |
| items | { id: string; label: string; description?: string; href?: string }[] | required | Four to ten integration nodes. IDs provide stable list identity. |
| rings | 1 | 2 | 3 | 2 | Number of visual orbit tracks. |
| orbitRadius | number | 168 | Outer orbit radius in pixels, clamped from 120 to 240. |
| rotationDuration | number | 24 | Outer revolution duration in seconds, clamped from 10 to 60. |
| direction | "clockwise" | "counterclockwise" | "clockwise" | Outer-ring direction. Adjacent inner rings alternate automatically. |
| nodeSize | number | 52 | Node diameter in pixels, clamped from 40 to 80. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Use the playground to tune ring count, radius, revolution duration, direction and node size. Surfaces, borders, text, focus rings and accents consume the existing semantic theme tokens, so the section follows both light and dark themes without colour props:
<IntegrationOrbitHub
rings={3}
orbitRadius={204}
rotationDuration={32}
direction="counterclockwise"
nodeSize={60}
title="One product, connected to every team"
hub={{ label: "Empire OS" }}
items={integrations}
/>Frequently asked questions
- Is Integration Orbit Hub free for commercial use?
- Yes. Integration Orbit Hub is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the orbit animation accessible and performance conscious?
- Yes. Each ring writes one transform through Motion and its nodes counter-rotate without React state updates. Hover and keyboard focus pause the animation, offscreen and hidden-tab states suspend it, and reduced motion uses a static grid with the same semantic content and links.
- How do I customise the orbit layout?
- Set rings, orbitRadius, rotationDuration, direction and nodeSize. Every value is bounded to a tested range, while the component continues to use semantic theme tokens for colour and focus treatment.