# Globe — component for maps & globes (react)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Dotted white earth turning slowly, orange city markers glowing on it, rising from the bottom of the frame

- **Install:** `npx shadcn@latest add @magicui/globe`
- **Registry:** magic-ui · **Framework:** react · **License:** MIT
- **Docs and preview:** https://magicui.design/docs/components/globe
- **Source:** https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/globe.tsx
- **Example:** https://skills.varg.ai/previews/lib-magic-ui-globe.mp4?v=74763 (Captured from the library’s own demo page (Magic UI))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Add the Globe from Magic UI (https://magicui.design/docs/components/globe, MIT) as a hero element: the dotted cobe earth rising from the lower third with a headline above it. Out of the box it spins by adding 0.005 to phi on every animation frame and smooths drag input with a spring, so its speed depends on the frame rate. Remove the pointer handlers and set state.phi from time inside onRender: phi = (frame / fps) * 0.3 in Remotion, or the paused timeline's time in HyperFrames, and make sure cobe has drawn before each frame is captured. Set markers to the cities in your story, markerColor and glowColor from the brand, dark: 1 for a night globe, and keep mapSamples around 16000 so the dots stay crisp at 1080p.

## Used in

- [Map & route animation](https://skills.varg.ai/video/map-story.md)
- [News explainer](https://skills.varg.ai/video/news-explainer.md)
- [History timeline](https://skills.varg.ai/video/history-timeline.md)
- [Conference & event promo](https://skills.varg.ai/video/event-promo.md)
- [Photo memories](https://skills.varg.ai/video/memories.md)
- [Birthday, wedding & invitation](https://skills.varg.ai/video/celebration.md)
- [Travel route video](https://skills.varg.ai/video/travel-route.md)
- [Real estate listing](https://skills.varg.ai/video/real-estate.md)

## More maps & globes

- [North Korea Locked Down](https://skills.varg.ai/component/hf.north-korea-locked-down.md) — `npx hyperframes add north-korea-locked-down`
- [NYC Paris Flight](https://skills.varg.ai/component/hf.nyc-paris-flight.md) — `npx hyperframes add nyc-paris-flight`
- [Spain Map](https://skills.varg.ai/component/hf.spain-map.md) — `npx hyperframes add spain-map`
- [US Map](https://skills.varg.ai/component/hf.us-map.md) — `npx hyperframes add us-map`
- [US Bubble Map](https://skills.varg.ai/component/hf.us-map-bubble.md) — `npx hyperframes add us-map-bubble`
- [US Flow Map](https://skills.varg.ai/component/hf.us-map-flow.md) — `npx hyperframes add us-map-flow`