A fully interactive 3D globe component with canvas-built markers - no restrictive marker templates like other globe components. Unlike typical WebGL globes that force you into a fixed marker style, this component lets you connect ANY Framer design as a marker: CMS cards, labeled tooltips, image stickers, pins, badges, or fully custom layouts. Build it once in Framer's native canvas, connect it, and it floats perfectly anchored on your spinning globe.
Add the 3D Globe CMS component on the desktop breakpoint.
Duplicate the component and place it outside the desktop breakpoint, then switch its "Type" toggle from 'Globe' to 'Marker' in the right panel.
Connect your own card design, tooltip, or image sticker into the Marker's "Info Card" slot (and optionally the "Dot" slot for a pinpoint indicator).
And Connect the Marker instance into the Globe's "Markers" slot.
Set the Marker's Latitude and Longitude to position it anywhere on the globe.
Customize spin, lighting, colors, drag physics, and marker sizing from the right-hand panel.
Get all the demos shown in the preview by purchasing the component here.
Spin controls: auto-rotate on/off, spin direction, spin speed, starting angle, & tilt.
Map controls: map sample density, map brightness, & base brightness.
Lighting controls: dark and diffuse settings shape how lit.
Colors: set the globe's dot color & the glow color around its edge.
Drag settings: adjust drag sensitivity, spin momentum, drag direction (free or horizontal-only), & vertical tilt limit.
Overlay blur: controls the fade-in blur applied to markers as they rotate into view.
More
Fully responsive.
Unlimited custom markers - no design restrictions, unlike competitor globes.
Native drag-to-rotate interaction with momentum and elastic tilt limits.
Optimized rendering with WebGL (via cobe.js) for lightweight performance.
Made with ❤ by Soyeb
Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com
A fully interactive 3D globe component with canvas-built markers - no restrictive marker templates like other globe components. Unlike typical WebGL globes that force you into a fixed marker style, this component lets you connect ANY Framer design as a marker: CMS cards, labeled tooltips, image stickers, pins, badges, or fully custom layouts. Build it once in Framer's native canvas, connect it, and it floats perfectly anchored on your spinning globe.
Add the 3D Globe CMS component on the desktop breakpoint.
Duplicate the component and place it outside the desktop breakpoint, then switch its "Type" toggle from 'Globe' to 'Marker' in the right panel.
Connect your own card design, tooltip, or image sticker into the Marker's "Info Card" slot (and optionally the "Dot" slot for a pinpoint indicator).
And Connect the Marker instance into the Globe's "Markers" slot.
Set the Marker's Latitude and Longitude to position it anywhere on the globe.
Customize spin, lighting, colors, drag physics, and marker sizing from the right-hand panel.
Get all the demos shown in the preview by purchasing the component here.
Spin controls: auto-rotate on/off, spin direction, spin speed, starting angle, & tilt.
Map controls: map sample density, map brightness, & base brightness.
Lighting controls: dark and diffuse settings shape how lit.
Colors: set the globe's dot color & the glow color around its edge.
Drag settings: adjust drag sensitivity, spin momentum, drag direction (free or horizontal-only), & vertical tilt limit.
Overlay blur: controls the fade-in blur applied to markers as they rotate into view.
More
Fully responsive.
Unlimited custom markers - no design restrictions, unlike competitor globes.
Native drag-to-rotate interaction with momentum and elastic tilt limits.
Optimized rendering with WebGL (via cobe.js) for lightweight performance.
Made with ❤ by Soyeb
Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com
