Wensity

Globe Card

Pro

A dark icon card holding a dotted globe that slowly spins on its own axis.

illustrationglobeearthcanvas3diconcard
Globe Card component preview

Overview

Globe Card is a React and Tailwind CSS icon card with a spinning dotted globe for global reach or network sections, in Next.js or any React app. The globe is drawn on a 2D canvas from a Natural Earth land mask bundled in the file, so it needs no WebGL, map library, or image request. Dots are lit from the upper left and tinted by glowColor. Rendering stops when the card leaves the viewport, and reduced motion gets a still frame of the Americas. Size is fixed pixels, so set it per breakpoint since the card does not stretch.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add globe-card

Usage

Import GlobeCard from @/components/wensity/globe-card and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { GlobeCard } from "@/components/wensity/globe-card";


export default function Example() {
  return <GlobeCard />;
}

Props

PropTypeDefaultDescription
sizenumber300Card edge length in pixels. Clamped to a 160 minimum.
titlestring"Our"Regular-weight first word in the centered label.
accentstring"World."Bold second word in the centered label, including punctuation.
spinSpeednumber2 * Math.PI / 28Y-axis spin in radians per second. Pass 0 to freeze.
pausedbooleanfalseFreeze the globe without unmounting.
tiltnumber0.34Pitch in radians so the northern hemisphere fills the crop.
glowColorstring"#3fcf50"Sphere and atmosphere tint. Hex preferred.
labelstring"Globe Card illustration"Accessible name announced for the illustration.

Related components

  • Animated MacBook component preview

    Animated MacBook

    A closed MacBook that hinges open and powers on when you hover, in ten finishes.

  • iPhone Mockup component preview

    iPhone Mockup

    A thick, extruded iPhone with a machined side rail, side buttons, and lock screen.

  • Glass Capsule Stack component preview

    Glass Capsule Stack

    A frosted glass tube that stacks feature chips and drops the oldest into a card.

  • Glass Envelope component preview

    Glass Envelope

    A frosted glass envelope with stacked photo cards that fan on hover, then lift from the frame when opened with a click.

Featured in React 3D components.