Globe

A rotating 3D globe rendered with WebGL. It responds to mouse and touch interactions for user control. Use it to display geographic data or as an engaging visual element.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/globe

npx layro-cli add @magicuidesign/globe

npx layro-cli add @magicuidesign/globe

bunx layro-cli add @magicuidesign/globe

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useEffect, useRef } from "react"
import createGlobe, { type COBEOptions } from "cobe"
import { useMotionValue, useSpring } from "motion/react"

import { cn } from "@/lib/utils"

const MOVEMENT_DAMPING = 1400

const GLOBE_CONFIG: COBEOptions = {
  width: 800,
  height: 800,
  onRender: () => {},