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

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

More maps & globes