Orbit card

A community card where people and app chips orbit a center mark. Someone joins every few seconds and the count rolls up. Hover to slow it, drag to spin it.

Cards, drag, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/orbit-card.tsx https://motion-brew.com/r/orbit-card.tsx

One self contained file for React and Tailwind CSS: orbit-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { OrbitCard } from "@/components/orbit-card";

export default function Page() {
  return (
    <OrbitCard
      count={24816}
      label="creators"
      cta="Join the community"
      href="/join"
    />
  );
}

Props

Prop	Type	Default	Description
count	number	24816	The number in the title; rolls up by one per join
label	string	"creators"	Words after the number
subtitle	string	a short line	Line under the title
cta	string	"Join the community"	Button label
href	string		Where the button goes
members	{ name; role; avatar? }[]	six people	People on the rings, up to six
logo	ReactNode	a four-point star	The center mark
speed	number	1	Ring speed multiplier; 0 holds still
joinEvery	number	2.6	Seconds between joins; 0 turns joining off
onCta	() => void		Button handler when there is no href
className	string		Size and shape of the card

More cards

Globe card: A feature card with a dotted three.js globe: arcs fly between people around the world and land with their avatar.
Avatar testimonial: Testimonials driven by a row of avatars: each quote rises in word by word out of a blur, and a ring fills around the active avatar until the next one.
Rolling card stack: A deck of metric cards that rolls forward like a rolodex: the front card tips away, the next glides in and counts up.
Particle card: A product feature card whose hero visual is a particle field: it morphs like ripples on water and parts around the cursor.

All animated react card components