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 { OrbitCard, 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",
  },
];

export default function Demo() {
  return (
    <div className="flex min-h-full w-full flex-col justify-center bg-[#0c0b0a] py-10">
      <div className="flex flex-wrap justify-center gap-5 px-6">
        {PEOPLE.map((p) => (
          <OrbitCard key={p.id} person={p} />
        ))}
      </div>
    </div>
  );
}