Buy Template Now $65→
Skip to main content

IntegrationsOrbit

A circular integrations showcase component that displays platform logos orbiting around a central brand image.

Perfect for SaaS landing pages, integrations pages, partner showcases, and ecosystem visualizations.

Import the component using:

import IntegrationsOrbit from "@/components/ui/integrationsOrbit";

Features

  • Infinite orbital animation
  • Viewport-aware performance optimization
  • Hover controls (pause, slow, none)
  • Configurable rotation speed
  • Configurable rotation direction
  • Counter-rotated icons remain upright
  • Optional orbit guide rings
  • Responsive sizing controls
  • Supports any image-based integration logo
  • SSR-safe hydration handling
  • Built with Motion and Next.js Image

Preview

IntegrationsOrbit Preview

Example

<IntegrationsOrbit
  centerImage="/logo.svg"
  integrations={[
    { id: "slack", image: "/integrations/slack.svg" },
    { id: "notion", image: "/integrations/notion.svg" },
    { id: "github", image: "/integrations/github.svg" },
    { id: "figma", image: "/integrations/figma.svg" },
    { id: "stripe", image: "/integrations/stripe.svg" },
  ]}
/>

Props

interface IntegrationItem {
  id: string;
  image: string;
}
 
interface IntegrationsOrbitProps {
  integrations: IntegrationItem[];
 
  centerImage?: string;
 
  size?: number;
 
  iconSize?: number;
 
  centerImageSize?: number;
 
  speed?: number;
 
  direction?: "left" | "right";
 
  actionOnHover?: "pause" | "slow" | "none";
 
  infinite?: boolean;
 
  showRings?: boolean;
 
  className?: string;
}

Integration Data Structure

const integrations = [
  {
    id: "slack",
    image: "/integrations/slack.svg",
  },
  {
    id: "github",
    image: "/integrations/github.svg",
  },
  {
    id: "notion",
    image: "/integrations/notion.svg",
  },
  {
    id: "stripe",
    image: "/integrations/stripe.svg",
  },
  {
    id: "figma",
    image: "/integrations/figma.svg",
  },
];

Custom Orbit Configuration

<IntegrationsOrbit
  integrations={integrations}
  centerImage="/logo.svg"
  size={700}
  iconSize={80}
  centerImageSize={140}
  speed={20}
  direction="right"
  actionOnHover="slow"
/>

Hover Behaviors

Pause Orbit

<IntegrationsOrbit
  integrations={integrations}
  actionOnHover="pause"
/>

Slow Orbit

<IntegrationsOrbit
  integrations={integrations}
  actionOnHover="slow"
/>

Disable Hover Interaction

<IntegrationsOrbit
  integrations={integrations}
  actionOnHover="none"
/>

Rotation Direction

Clockwise

<IntegrationsOrbit
  integrations={integrations}
  direction="right"
/>

Counter Clockwise

<IntegrationsOrbit
  integrations={integrations}
  direction="left"
/>

Hide Orbit Rings

<IntegrationsOrbit
  integrations={integrations}
  showRings={false}
/>

Disable Infinite Rotation

<IntegrationsOrbit
  integrations={integrations}
  infinite={false}
/>

Complete Example

const integrations = [
  { id: "slack", image: "/integrations/slack.svg" },
  { id: "github", image: "/integrations/github.svg" },
  { id: "notion", image: "/integrations/notion.svg" },
  { id: "stripe", image: "/integrations/stripe.svg" },
  { id: "figma", image: "/integrations/figma.svg" },
  { id: "discord", image: "/integrations/discord.svg" },
];
 
<IntegrationsOrbit
  integrations={integrations}
  centerImage="/logo.svg"
  size={650}
  iconSize={72}
  centerImageSize={120}
  speed={15}
  direction="right"
  actionOnHover="slow"
  infinite
  showRings
/>
NextlogoMarquee