Orbit Card

Cards

About

A profile card where hovering sends a swarm of glowing coloured dots traveling around the card's border, usable standalone or as an endless draggable marquee of team members.

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

Code

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

Usage.tsx

"use client";

import { OrbitMarquee, type OrbitPerson } from "@/components/ui/orbit-card";

const PEOPLE: OrbitPerson[] = [
  {
    id: "am",
    name: "Alex Morgan",
    role: "Design Lead · Interfaces and motion systems",
    color: "#5C7CFA",
  },
  {
    id: "pr",
    name: "Priya Raman",
    role: "Staff Engineer · Rendering pipeline",
    color: "#EF6FA7",
  },
  {
    id: "jo",
    name: "Jonah Okafor",
    role: "Product Manager · Onboarding",
    color: "#9B5DE5",
  },
  {
    id: "ml",
    name: "Mei Lindqvist",
    role: "Research · Accessibility and inclusive testing",
    color: "#2FBF71",
  },
  {
    id: "rv",
    name: "Rafael Vidal",
    role: "Engineer · Realtime collaboration",
    color: "#E07A3D",
  },
  {
    id: "sn",
    name: "Sana Noor",
    role: "Brand Designer · Type and identity",
    color: "#4ECDC4",
  },
];

export default function Demo() {
  return (
    <div className="flex min-h-full w-full flex-col justify-center bg-[#0c0b0a] py-10">
      <OrbitMarquee people={PEOPLE} label="Team" />
    </div>
  );
}