Connection Globe 3D

Add a high-performance interactive 3D globe to your site with animated flight routes, country hover detection, custom markers, and smooth cinematic controls to showcase global reach and scale instantly.

Features

• Interactive 3D WebGL globe with smooth inertia and momentum

• Animated arc flight paths and global network routes

• Interactive country hover tooltips with built-in boundary data

• Zero network requests with embedded high-resolution vector map data

• Clickable country event triggers for custom Framer interactions

• Customizable location pins, labels, and marker styling

• Dual-tone atmosphere rim lighting and customizable background starfield

• Smart auto-rotation with user drag and zoom override

• Retina-sharp rendering up to 4K resolution

• Built-in accessible fallback and reduced-motion support

Customization Options

• Latitude, longitude, zoom level, and camera view angle

• Auto-rotate toggle and rotational spin speed

• Drag sensitivity, coasting inertia, and wheel zoom controls

• Country hover highlights and border visibility toggles

• Pin locations, custom coordinates, and label styling

• Flight route paths, arc curvature height, and animation speed

• Land dot density, dot scale, and opacity

• Ocean, land, glow, route, and background colors

• Starfield density, atmosphere glow, and corner radius

• Render scaling and frame performance constraints

How to Use

• Drag and drop the component onto your Framer canvas

• Set your initial camera view by adjusting latitude, longitude, and zoom

• Add your custom office, server, or hub coordinates to the locations array

• Connect locations by setting source and destination route indices

• Customize colors, glow, and dot density to match your brand palette

• Publish your site to showcase an interactive 3D global experience