Svelte Globe
Usage
Explore the core globe patterns, compare their source, and reuse the example that best fits your interaction or performance needs.
Base Setup
Minimal globe setup with animated rotation and markers for a fast starting point.
Draggable Globe
Pointer-driven globe interaction with inertia and bounded tilt so users can explore the scene directly.
Globe Colors
Shows how `baseColor`, `markerColor`, `arcColor`, `dark`, and `mapBrightness` change the globe mood without adding extra interaction.
CSS Anchor Labels
Attaches HTML labels to globe markers using CSS anchor positioning for richer marker annotations.
Focus Location
Smoothly rotates the globe toward a target latitude and longitude to highlight a specific place.
Dynamic Arc Tour
Switch between five routes, auto-focus the destination city, and keep drag interaction available for a richer flight-style preview.
Performance Pattern
Shows how to pause rendering off-screen and resume animation only when the globe is visible again.