design-infraReport a problem or share feedback← Catalog
Globe
curatedfreemagicui/globe
An autorotating, interactive, and highly performant globe made using WebGL.
$
npx shadcn@latest add @magicui/globenpm deps: cobe@^0.6.4, motion
Our notes
Lightweight WebGL globe (cobe) — much cheaper than Aceternity's three.js globe. Colours are RGB arrays in the config (white base, orange markers); tune to your palette. One per page.- Source
- Magic UI
- Kind
- component
- Categories
- map
- Use as
- drop-in — replaces your component
- Applies to
- maphero
- Motion
- on loop, drag · expressive · webgl · high cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- Hero Heatmapcult-ui/hero-heatmapSplit-layout hero section with responsive Heatmap shader visuals, CTA, and tech stack badges
- Flip Wordsaceternity/flip-wordsRotating keyword in a headline ("Build ___ faster"). Keep to 3–5 words.
- Spotlight Newaceternity/spotlight-newBest 'premium dark' hero backdrop. Hard-codes a blue hsla gradient — pass gradientFirst/Second/Third or use @oc/hero-spotlight, which tints it from --primary.