Globe card

A feature card with a dotted three.js globe: arcs fly between people around the world and land with their avatar. Hover to tilt it, drag to spin it.

Cards, drag, Motion + Three.js

Install

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

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

Usage

import { GlobeCard } from "@/components/globe-card";

const team = [
  { name: "Ava Chen", city: "San Francisco", lat: 37.8, lon: -122.4 },
  { name: "Tom Becker", city: "Berlin", lat: 52.5, lon: 13.4 },
  { name: "Kenji Sato", city: "Tokyo", lat: 35.7, lon: 139.7 },
];

export default function Page() {
  return (
    <GlobeCard
      title="Global team"
      subtitle="We are designers, engineers and writers spread across ten countries."
      cta="Meet the team"
      href="/team"
      members={team}
    />
  );
}

Props

Prop	Type	Default	Description
title	string	"Global team"	Card title
subtitle	string	a short line	Line under the title
cta	string	"Meet the team"	Button label
href	string		Where the button goes
members	{ name; city; lat; lon; color? }[]	ten people	Teammates and where they are
arcs	number	6	Arcs in flight at once
turn	number	70	Seconds per full turn; 0 holds still
onCta	() => void		Button handler when there is no href
className	string		Size and shape of the card

More cards

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.
Wallet card: A balance card that counts up on odometer wheels like the chart cards.

All animated react card components