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.
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.
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.
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.
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.
Credit – This component is built on top of a library called Cobe.
Made with ❤️ by Soyeb
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
If you have any questions, need a custom Framer component, want clarification, or run into any issues, you can always reach me out at creator.nitso@gmail.com. I’m here to help.
Soyeb
