3D Globe: Premium UI Component by Soyeb

Interactive 3D Globe is a fully customizable and super-light (less than 5kb) 3D globe component for Framer. It brings immersive earth visualization into your projects with smooth drag interactions, auto-rotation, and support for global markers. Whether you want to highlight world locations, showcase location markers, or build a rich interactive world map, this component provides a professional and flexible solution. Perfect for geographic map visualization, coordinate mapping, and dynamic planet earth experiences.

Instructions

Copy and paste the component into your project file.
Add custom markers by clicking the "Add" button in the Markers property control and entering latitude/longitude coordinates (e.g., 40.7128, -74.0060). This allows you to highlight key world locations with precision.
Customize the globe’s appearance, colors, and behavior using the property controls in the right-hand panel.
Adjust globe size, rotation settings, lighting effects, and interaction sensitivity to match your design needs.

How It Works

This interactive globe features 8 main control groups with comprehensive customization options:

Globe Size: Controls the dimensions of the 3D earth (200–1200px).
Position & Rotation: Manages longitude/latitude positioning, rotation speed, and auto-rotation toggle.
Appearance: Adjusts dark mode intensity and diffuse lighting effects for stunning spherical visualization.
Map Settings: Controls rendering quality (map samples) and brightness levels.
Colors: Customizes base globe color and glow effect color.
Markers: Array-based system for adding up to 20 location markers with custom coordinates, sizes, and colors.
Mouse Interaction: Toggle and sensitivity controls for drag-to-rotate functionality.
Interaction Intensity: Fine-tunes drag sensitivity from 0.1x to 2x normal speed.

Properties Control Panel

Video Demonstration

3D Globe Video Tutorial

Key Features

Fully Responsive & Ready-to-Use

Adapts to container size with perfect aspect ratio.
Live canvas preview for real-time design feedback.
Optimized performance with reduced samples in design mode.

Advanced Interactions

Smooth drag-to-rotate interactive map with customizable sensitivity.
Touch gesture support for mobile devices.
Auto-rotation with configurable speed.
Smart cursor states (grab/grabbing).

Highly Customizable

Individual global markers with custom colors, sizes, and positioning.
Dark/light mode with adjustable intensity.
Professional lighting effects and glow options.
High-quality map rendering up to 50,000 samples.

Performance Optimized

Super-light (less than 5kb) build for maximum efficiency.
Framer Motion integration for buttery-smooth animations.
Canvas-based rendering with WebGL acceleration.
Efficient memory management and cleanup.
Responsive resize handling.

Use Cases

Data Visualization: Display global sales, user locations, or market presence with an interactive world map.
Travel & Tourism: Showcase destinations, travel routes, or highlights on a world globe.
Corporate Websites: Highlight offices, international presence, or service areas on a geographic map visualization.
Educational Content: Teach geography, climate data, or world statistics with a planet earth visualization.
Portfolio Projects: Demonstrate global reach, project highlights, or client base using a spherical visualization.
SaaS Dashboards: Show real-time analytics, server locations, or performance data with a live stats globe.
Event Websites: Present conference locations, speaker origins, or attendee demographics on an interactive globe.