Tween UITween UI
7

Components

Logo Orbit

Logos spaced evenly around a ring that rotates while each stays upright.

Logos sit evenly spaced around a ring that rotates continuously, while GSAP counter-rotates each logo so it always stays upright. Hover pauses the orbit by default (pauseOnHover). Set the size and speed to taste. Driven by GSAP.

New tab
Figma
GSAP
Tailwind CSS
React
TypeScript
Discord
GitHub
Slack

Installation

pnpm dlx shadcn@latest add @tween-ui/logo-orbit

Usage

app/page.tsx
app/page.tsx
import LogoOrbit from '@/components/tweenui/orbit/logo-orbit';
 
const logos = [
  { src: '/logos/slack.svg', alt: 'Slack' },
  { src: '/logos/figma.svg', alt: 'Figma' },
  { src: '/logos/github.svg', alt: 'GitHub' },
  { src: '/logos/linear.svg', alt: 'Linear' },
];
 
export default function Page() {
  return <LogoOrbit logos={logos} size={320} speed={1} />;
}

Props

PropTypeDefaultDescription
logos{ src, srcDark?, alt }[]—Logos placed evenly around the ring. srcDark swaps in under .dark.
sizenumber320Ring diameter in pixels.
speednumber1Rotation multiplier (1 = one turn every ~20s).
pauseOnHoverbooleantruePause the orbit while the pointer is over it.

Extends native <div> attributes (className, style, …).

Accessibility

Each logo keeps its alt text. The rotation is decorative; under prefers-reduced-motion: reduce the ring holds still with the logos laid out statically around it.