Orbiting Avatars

Heroes 209

About

Orbiting Avatars CTA Description: A visually engaging Call-to-Action (CTA) component that displays a central message, a button, and a configurable set of avatars that gently float and orbit around the content. It's designed to highlight community, contributors, or users in a dynamic way.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Orbiting Avatars to your project and fits it to your theme.

Code

How Orbiting Avatars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { OrbitingAvatarsCTA } from '@/components/ui/orbiting-avatars';

const Demo = () => {
  const avatars = [
    { src: 'https://cdn.21st.dev/assets/mirror/42/420c64d5e90b2ff05fc182e3d8c3df40076440cb684d927efed247855775ea9b.jpg', alt: 'User 1' },
    { src: 'https://cdn.21st.dev/assets/mirror/be/be1b67757a13dfec4386e8627236a7194c6bcfb07502dbd82f727f6ccac46bcd.jpg', alt: 'User 2' },
    { src: 'https://cdn.21st.dev/assets/mirror/b4/b48ca5758f41e9f512fa264f7fde87a13a6149e94230111e949268b4780279cc.jpg', alt: 'User 3' },
    { src: 'https://cdn.21st.dev/assets/mirror/84/84811a44ccc64660055b77ed641ae6617edb60314efcdbc945cb91fc27aed815.jpg', alt: 'User 4' },
    { src: 'https://cdn.21st.dev/assets/mirror/f9/f99a76bee7ebb41a84ba63d00499ed81588a17e0f1bba07aa22d2c4e4d187a82.jpg', alt: 'User 5' },
    { src: 'https://cdn.21st.dev/assets/mirror/67/6734807085015478f70dc12be3669b8127939ec42f17aa6d995fe317d19971cc.jpg', alt: 'User 6' },
  ];

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <OrbitingAvatarsCTA
        title="Contribute to Our Community"
        description="Our platform is built by a community of creators who want to share — from amateurs to professionals and everyone in between."
        buttonText="Submit Your Work"
        buttonProps={{ onClick: () => alert('Button Clicked!') }}
        avatars={avatars}
        orbitRadius={22}
        orbitDuration={50}
      />
    </div>
  );
};

export default Demo;