Cinematic 3D Globe

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