# Globe

Source: https://lumeo.nativ.sh/components/globe

# Globe

A stylized rotating 3D globe rendered on a canvas element with dotted lat/long lines and a sweep glow arc.

## When to Use

-   Hero sections for global/international products.
-   Data visualization dashboards to indicate worldwide reach.
-   Marketing pages that benefit from a distinctive animated centerpiece.

The Globe is a stylized canvas representation — a custom dotted-sphere animation rendered without third-party WebGL libraries. It is not a geographically accurate globe.

Preview Code

Default Globe

Copy Code

Preview Code

Custom Size and Colors

Copy Code

## API Reference

Property

Type

Default

Description

Size

int

300

Canvas size in pixels (always square).

DotColor

string

"var(--color-foreground)"

Color of the globe surface dots.

GlowColor

string

"var(--color-primary)"

Color of the sweep glow arc.

Speed

double

1.0

Rotation speed multiplier.

## Related Components

-   [Meteors](/components/meteors) — Falling streak effect for decorative backgrounds.
-   [Ripple](/components/ripple) — Concentric ring expansion from a center point.