Add a premium interactive 3D particle globe with custom markers, magnetic cursor snapping, cinematic fly-to animations, and liquid lens hover effects.

Features

• Real-time WebGL particle rendering

• Animated ocean shader with smooth cinematic reveal

• Interactive 3D markers with rich media (images, text, buttons)

• Magnetic snapping UI and custom GSAP-style crosshair

• Cinematic fly-to zoom animations on marker click

• Liquid lens hover distortion and magnification

• Highly optimized Three.js performance with smart raycasting

• Customizable land dot density and organic size variance

• Fully responsive with smart viewport rendering

• Zero-code, drag-and-drop Framer integration

Customization Options

• Globe scale and rotation speed

• Land particle density, base size, and randomness

• Ocean colors (highlight, dark, light)

• Marker style (Location pin or Plus snapping UI)

• Full UI color theming (markers, text, backgrounds)

• Hover lens radius, bulge, and magnification

• Custom crosshair cursor toggle and styling

• Unlimited custom locations via latitude/longitude

How to Use

• Drop the component onto your Framer canvas

• Add your locations using latitude and longitude coordinates

• Choose between standard pins or magnetic snapping UI

• Add images, descriptions, and custom buttons to your markers

• Adjust the globe and particle colors to match your brand

• Publish for a premium, high-performance 3D experience

Use Cases

• Global SaaS customer maps

• Agency office location showcases

• Interactive travel and real estate hubs

• Premium enterprise landing pages

• Global impact and data visualizations

• Modern immersive contact pages

• Web3 and crypto network maps