Globe Wireframe

Component

About

An interactive SVG wireframe globe that auto-rotates, can rotate to named cities or coordinates, and supports drag interaction with wireframe, wireframe-solid, and solid rendering variants.

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

Code

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

Usage.tsx

"use client";

import GlobeWireframe from "@/components/ui/globe-wireframe";

export default function GlobeWireframeDemo() {
  return (
    <div className="relative w-full h-95 sm:h-112.5 overflow-hidden bg-background">
      <div className="relative z-10 flex flex-col items-center pt-10 sm:pt-16 text-center px-4">
        <h1
          className="font-bold tracking-tight leading-tight text-black dark:text-white
          text-3xl sm:text-5xl"
        >
          <span className="block">Connecting the World</span>
          <span className="block">Through Innovation</span>
        </h1>
      </div>

      <div className="absolute bottom-[-45%] sm:bottom-[-35%] left-1/2 w-[130%] sm:w-full h-full -translate-x-1/2">
        <GlobeWireframe className="w-full h-full" variant="solid" scale={0.9} />
      </div>
    </div>
  );
}