Dot Globe

hot

A dotted planet on canvas — Fibonacci sphere, procedural continents, pulsing markers and great-circle arcs with comets. Drag to spin.

canvasdragprojection5 files · 528 locdeps: clsx, tailwind-merge

Global edge

Deploy once. Serve everywhere.

Drag the planet. Continents are procedural, arcs are great circles, comets ride them.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/dot-globe.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs dot-globe

Usage

import { DotGlobe } from "@/components/opus/three/dot-globe";

<DotGlobe markers={[{ lat: 13.75, lng: 100.5 }]} arcs={[[0, 1]]} className="h-[420px]" />

API

Prop	Type	Default	Description
color / oceanColor / accent	string	—	Land, ocean and arc/marker colours.
dots	number	2200	Sphere resolution.
speed	number	8	Auto-spin (deg/s).
markers	{ lat; lng; label? }[]	—	Pins.
arcs	[number, number][]	—	Marker index pairs to connect.
seed	number	3	Continent layout.

← Previous3D Marquee Next →Card Stack