---
title: "Cinematic 3D Globe — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Saadat Ali · Maps. Interactive 3D particle globe"
canonical: "https://framer.elliotli.dev/component/cinematic-3d-globe"
---

[Home](/)/[Components](/components)/[Maps](/components/category/maps)/Cinematic 3D Globe

# Cinematic 3D Globe

Interactive 3D particle globe

[View on Framer](https://framer.com/marketplace/components/cinematic-3d-globe/?via=elliot-li)

![Cinematic 3D Globe preview image 1](https://framer.elliotli.dev/og/component/cinematic-3d-globe/519b4fcd0176da9c/1600x1200.jpg)

## Summary

Interactive 3D particle globe

## Description

**Features**

-   GPU-accelerated particle continents powered by Three.js
    
-   Procedural GLSL animated ocean shader with rim lighting
    
-   Snapping glassmorphism location cards with images and links
    
-   Interactive 3D pin markers with latitude and longitude mapping
    
-   Custom crosshair cursor with magnetic snapping mechanics
    
-   Liquid lens hover magnification and organic bulge effects
    
-   Smooth inertia-based drag rotation and auto-spin controls
    
-   Zero-allocation animation loop optimized for 60fps performance
    
-   Responsive auto-resizing with canvas depth and opacity masking
    
-   Fully integrated Framer property controls for effortless styling
    

**Customization Options**

-   Ocean highlight, dark, and light shader gradient colors
    
-   Particle dot color, density count, and organic size variance
    
-   Base dot size and pulse animation speed
    
-   Marker style selection (Interactive Plus Card vs. Location Pin)
    
-   Custom location coordinates (Latitude and Longitude)
    
-   Marker card imagery, title, body text, and CTA buttons
    
-   Marker background, active states, and custom typography colors
    
-   Crosshair cursor toggle, line opacity, and center dot size
    
-   Liquid hover lens radius, magnification, and bulge intensity
    
-   Globe scale, canvas offset positions, and auto-rotation speed
    

**How to Use**

-   Drag the component directly onto your Framer canvas
    
-   Add your custom locations using latitude and longitude coordinates
    
-   Choose between minimal location pins or rich interactive cards
    
-   Adjust particle density and color palette to match your brand
    
-   Fine-tune rotation speed and interactive lens hover dynamics
    
-   Publish your site to deliver an immersive 3D world experience
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1640

## Details

- **Author**: Saadat Ali
- **Price**: $12.00
- **Published**: 2026-09-14
- **Updated**: 2026-09-21
- **Added**: 2026-09-14
- **Categories**: Maps

## More like this

-   [Waypoint](/component/waypoint) — Dev Ahsan · $9 — Photo-first locations map
-   [No-key Store Locator](/component/no-key-store-locator) — Sean Weekes · $15 — UK store finder, no Google API key
-   [Geo Office Location](/component/geo-office-location) — Design Foundry · Free — Interactive Global Office Showcase
-   [Map Locator CMS](/component/map-locator-cms) — sherwin · $15 — Map Locator CMS is a flexible, interactive map component for Framer that helps you showcase stores, offices, properties, venues, service…