ComponentsOrbit Logo Button

Orbit Logo Button

A CTA button surrounded by bubbles that fly into the button on hover — perfect for showing avatars, brand logos, or social proof.

Framer Motion

Installation

Use the CLI for the fastest setup, or copy the file manually.

Run this command in your project root. The CLI will create components/ui/OrbitLogoButton.tsx and write the file automatically.

Terminal

$ npx @nehal712521/inprogress add orbit-logo-button

✔ Fetching from registry…

✔ Created components/ui/OrbitLogoButton.tsx

✔ Done!

pnpmpnpm dlx @nehal712521/inprogress add orbit-logo-button

npmnpx @nehal712521/inprogress add orbit-logo-button

bunbunx @nehal712521/inprogress add orbit-logo-button

Preview

Hover the button to pull all the bubbles into the center.

Usage

import { OrbitLogoButton } from "@/components/ui/OrbitLogoButton";

export default function Example() {
  return (
    <div className="flex gap-4 flex-wrap">
      <OrbitLogoButton>Pull me in</OrbitLogoButton>
      <OrbitLogoButton size="lg">Join the waitlist</OrbitLogoButton>
    </div>
  );
}

Custom avatars or logos

Pass React nodes to the items prop to render your own avatars, logos, or icons inside each bubble.

import Image from "next/image";
import { OrbitLogoButton } from "@/components/ui/OrbitLogoButton";

const avatars = [
  "/avatars/user-1.png",
  "/avatars/user-2.png",
  "/avatars/user-3.png",
  "/avatars/user-4.png",
];

export default function Example() {
  return (
    <OrbitLogoButton
      items={avatars.map((src) => (
        <Image
          key={src}
          src={src}
          alt=""
          width={20}
          height={20}
          className="w-full h-full object-cover"
        />
      ))}
      bubbleClassName="bg-transparent"
    >
      Join the community
    </OrbitLogoButton>
  );
}