Aura 3D Globe Pro - Cinematic Interactive 3D Globe For Framer

Aura 3D Globe Pro : Arcs, Aurora & City Pins

The most configurable 3D globe component for Framer. Dot sphere, aurora borealis, spring-physics magnetic cursor, great-circle arcs, city pin popups, shooting stars, and data spikes — all from the property panel. No WebGL. No dependencies. No code.

 

Why Aura 3D Globe is Different :

Most globe components give you one look and a handful of color controls. Aura Globe is a full visual system. Every layer — dots, land, arcs, aurora, cursor, labels, spikes — is independently configurable. You're not tweaking a preset. You're composing a scene.

It renders entirely on Canvas 2D. No WebGL requirement, no Three.js, no external libraries. It loads fast, works on every modern device, and publishes without optimization errors.

Getting Started :

Copy the component into your Framer project

Drop it onto any frame or section

Open the properties panel on the right

Adjust colors, features, and cities — everything updates live on canvas

Publish. Done.

No setup. No API keys. No configuration files.

The dot globe

The globe renders up to 8,000 dots distributed across the sphere using a Fibonacci algorithm — the same method used to achieve perfectly uniform coverage with no clustering at the poles. Dots are depth-sorted in real time across 12 buckets for a natural 3D parallax feel.

Dot area — Choose where dots appear:

• Everywhere (full sphere)

• Ocean only (land-masked)

• Land only (land-masked)

Dot motion — Four modes to bring the surface alive:

• Static (default, crisp)

• Noise (organic drift)

• Fluid (slow liquid movement)

• Pulse (rhythmic breathing)

Dot breathing — A separate sine-wave size oscillation, independent from motion, adds a subtle ambient pulse to the whole sphere.

Color depth — Dots transition from a pole color to an equator color based on latitude, with an optional rim lighting effect at the silhouette edge.

Land & geography

Aura Globe loads real-world land polygon data and renders it directly onto the sphere. No static image maps. The borders rotate accurately with the globe.

Solid land fill — Fill color + edge color, both with independent opacity controls. Edge line weight is adjustable.

Dotted land — Replace the filled land with a dot-matrix style layer. Fully independent from the background dot sphere:

• Separate dot size range, density, color, opacity, and glow

• Depth gradient toggle

• Independent dot motion (static / noise / fluid / pulse)

• Magnetic cursor interaction toggle

• Pulse animation toggle

Land fill + dots — Enable both simultaneously for a layered look.

Magnetic Cursor :

The most distinctive feature. When a visitor hovers over the globe, nearby dots respond to their cursor with spring physics — not a simple linear offset, but a proper spring-damper system with configurable stiffness and friction.

Four cursor modes:

• Attract — dots pull toward the cursor

• Repel — dots push away

• Orbit — dots rotate around the cursor position

• Vortex — attract + orbit combined

Fine controls: field radius, strength, max shift distance, spring constant, friction, falloff curve (linear / quadratic / cubic / inverse), size boost on affected dots, brightness boost, and color tint shift.

Cursor aura — A visual ring system follows the cursor on the globe surface in true 3D (projected onto the sphere geometry, not flat on the screen). Configurable rings, speed, opacity, dash pattern, glow, and center dot shape (circle / cross / diamond / pulse).

Aurora borealis

A multi-layer aurora renderer composited over the globe with screen blend mode. Organic curtain motion is driven by compound sine waves across three frequencies per layer — no looping textures, no pre-rendered video.

• Up to 12 simultaneous layers

• Three fully customizable colors with smooth cycling between them

• Polar caps mode or full-globe coverage

• Both poles option

• Mouse-reactive: the aurora shifts subtly toward the cursor position

• Adjustable flow speed and opacity

Great-circle arcs

Connections between cities follow great-circle paths — the geometrically correct shortest route across a sphere, the same paths real flight routes take. Each arc lifts off the surface with a configurable height.

• Up to 20 arcs simultaneously

• Animated dashed line traveling along the arc

• Arc color, opacity, speed, and lift height controls

• Arcs connect cities from your active city list automatically

Shooting stars

City-to-city shooting stars travel along great-circle routes with a glowing head and a gradient tail that fades in the direction of travel.

• Up to 10 concurrent shooting stars

• Define separate "from" and "to" city lists

• Random route mode or sequential

• Controls for speed, duration, tail length, arc height, glow blur, trail width, and spawn interval

• Head color and tail color set independently

City hotspots

Every city in your active list renders a pulsing ring beacon — the classic "radar ping" effect used on SaaS dashboards and network maps.

• Adjustable dot size, pulse ring count, glow blur, and speed

• Color controlled independently from the dot sphere

City pin popups

Place labeled pins anywhere on the globe. Each pin has a stem line, a glowing dot, and a popup card that appears on hover (or auto-shows when the city faces forward).

• Up to 20 pins

• Each pin has: city, label, sublabel, and color

• Four popup transition styles: spring, fade, slide, instant

• Auto-show mode: popups appear and disappear automatically as the globe rotates

Data spikes

Vertical bars rise from city locations like a 3D bar chart on the globe surface. Each spike animates with a sine-wave oscillation.

• Up to 30 spikes

• Per-spike controls: city, height, color, width, label, animate toggle, animation speed

• Gradient stroke from base to tip

• Glow blur effect

Spotlight rings

Expanding pulse rings centered on a city — ideal for highlighting key locations or live status indicators.

• Up to 20 spotlights

• Per-spot controls: city, label, color, radius, ring count, pulse speed, glow intensity

• Optional radial fill gradient

Render modes

Switch the entire globe rendering style without changing any other settings:

• Dots — pure dot sphere (default)

• Wireframe — latitude and longitude grid lines only

• Hybrid — dots and wireframe combined

Wireframe mode includes: grid line count (lat/lng), line color, opacity, line weight, glow blur, equator highlight with separate color and weight, and a horizontal scan line that sweeps across the globe.

Active city list

Choose which cities are active for hotspots and arc connections from a built-in database of 64 global cities across every continent — no coordinates to enter manually.

Constellation lines

Connect nearby front-facing dots with faint lines, creating a star map aesthetic. Configurable connection distance, line color, and opacity.

Shockwave click effect

A circular shockwave expands from wherever the user clicks on the globe. Color and duration are configurable.

Performance & compatibility

• Canvas 2D rendering — no WebGL requirement

• Zero external dependencies — no libraries, no API keys, no CDN calls at runtime

• SSR-safe — publishes without Framer optimization errors

• Responsive — fills any container, respects device pixel ratio (capped at 2×)

• 60fps target — depth bucket rendering system pre-allocates all buffers, zero garbage collection per frame

• Land mask — built asynchronously off the main thread, globe renders immediately while geography loads

All property controls at a glance

• Globe — background color, rotation speed, initial tilt, drag damping, hover slow, enable drag

• Dots — count (up to 8K), min/max size, pole color, equator color, rim lighting, dot area, dot motion, back-face visibility

• Land — show/hide, fill color + opacity, edge color + opacity, edge width, dotted land mode + all sub-controls

• Aurora — on/off, 3 colors, opacity, speed, layers, full globe / polar caps / both poles, mouse reactive

• Magnetic cursor — on/off, mode, radius, strength, max shift, spring, friction, falloff, size boost, brightness, color tint

• Cursor aura — on/off, mode (3D surface / flat screen), shape, color, opacity, rings, size, line width, glow, dash, speed, center dot

• Arcs — on/off, count, color, opacity, speed, lift height, arc steps

• Shooting stars — on/off, max concurrent, from cities, to cities, random/sequential, head color, tail color, width, glow, tail length, speed, duration, arc height, interval

• Hotspots — on/off, color, dot size, glow, pulse speed

• City pins — up to 20, per-pin city/label/sublabel/color, auto-show, popup transition

• Data spikes — on/off, up to 30, per-spike

city/height/color/width/label/animate/speed, default glow

• Spotlights — on/off, up to 20, per-spot city/label/color/radius/rings/pulse speed/glow, fill gradient

• Wireframe grid — lat lines, lng lines, color, opacity, line width, glow, equator highlight, scan line

• Dot motion — motion type, amount, breathing speed, breathing amount

• Constellation — on/off, connect distance, line color, opacity

• Shockwave — on/off, color, duration

• Active cities — select any combination of 64 built-in global cities

• Performance — max device pixel ratio

Ideal for

• SaaS and startup hero sections showing global presence

• Company location and office maps

• Network, logistics, and infrastructure visualizations

• Investor decks and pitch pages

• Agency and portfolio hero sections

• Data dashboards with geographic context

• Any page that needs to feel global, premium, and alive

Support

 

Questions? Reach out via the contact button on this listing. Updates are included with your purchase.