Globe

Highly performant WebGL globe with autorotation, pointer drag, and configurable markers. Built with cobe and spring physics from motion.

Pass a custom config to change colors, brightness, and marker locations.

Default

Slow autorotation with orange markers — drag horizontally to spin the globe.

Loading…

Installation

CLI

npx @sonojs/ui@latest add globe

Also needs

npm i cobe@^0.6.5 motion

Usage

page.tsx

"use client"

import { Globe } from "@/components/3d/globe"

export default function Page() {
  return (
    <div className="bg-canvas relative flex h-[380px] w-full max-w-lg items-center justify-center overflow-hidden rounded-[12px] border border-border/70 px-10 pb-40 pt-8 sm:h-[480px]">
      <span className="pointer-events-none bg-linear-to-b from-foreground to-foreground/30 bg-clip-text text-center text-7xl font-semibold leading-none text-transparent">
        Globe
      </span>
      <Globe className="top-28" />
    </div>
  )
}

Props

Prop	Type	Default	Description
className	string	-	Classes on the absolute square wrapper around the canvas.
config	COBEOptions	GLOBE_CONFIG	Cobe options — size, colors, markers, and map quality. See cobe.vercel.app for the full shape.