Cinematic 3D Globe

Interactive 3D particle 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

Interactive 3D particle globe