Component
Interactive Animated 3D Globe for Framer
This is an interactive animated 3D globe component for Framer, recreated from Shadcn’s original component. You can copy and paste it into your project to customize rotation, interaction, and visual details, and use it without writing any code.
About the resource
To use the component, just copy and paste it into your canvas, then tweak the properties from the right panel to get the look and behavior you want. You can preview the globe animation right in the canvas or keep it static while designing. Auto-rotation is supported with adjustable direction and speed, and the overall feel of the motion can be fine-tuned using smoothing and drag speed controls.
The component also includes controls for scale, hover behavior, and the starting latitude and longitude, giving full control over how the globe is positioned and how it reacts. On the visual side, land dot density, dot size, and continent detail can be adjusted, or simplified for better performance. Markers are fully configurable too, allowing locations to be added using latitude and longitude, with global controls for marker size and color.
There are separate controls for continent outlines, grid lines, and ocean color, so each layer can be shown, hidden, or styled as needed. Overall, the component is designed to feel intuitive to customize, while still offering enough depth to adapt to different design styles and use cases.
About the resource
To use the component, just copy and paste it into your canvas, then tweak the properties from the right panel to get the look and behavior you want. You can preview the globe animation right in the canvas or keep it static while designing. Auto-rotation is supported with adjustable direction and speed, and the overall feel of the motion can be fine-tuned using smoothing and drag speed controls.
The component also includes controls for scale, hover behavior, and the starting latitude and longitude, giving full control over how the globe is positioned and how it reacts. On the visual side, land dot density, dot size, and continent detail can be adjusted, or simplified for better performance. Markers are fully configurable too, allowing locations to be added using latitude and longitude, with global controls for marker size and color.
There are separate controls for continent outlines, grid lines, and ocean color, so each layer can be shown, hidden, or styled as needed. Overall, the component is designed to feel intuitive to customize, while still offering enough depth to adapt to different design styles and use cases.
About the resource
To use the component, just copy and paste it into your canvas, then tweak the properties from the right panel to get the look and behavior you want. You can preview the globe animation right in the canvas or keep it static while designing. Auto-rotation is supported with adjustable direction and speed, and the overall feel of the motion can be fine-tuned using smoothing and drag speed controls.
The component also includes controls for scale, hover behavior, and the starting latitude and longitude, giving full control over how the globe is positioned and how it reacts. On the visual side, land dot density, dot size, and continent detail can be adjusted, or simplified for better performance. Markers are fully configurable too, allowing locations to be added using latitude and longitude, with global controls for marker size and color.
There are separate controls for continent outlines, grid lines, and ocean color, so each layer can be shown, hidden, or styled as needed. Overall, the component is designed to feel intuitive to customize, while still offering enough depth to adapt to different design styles and use cases.
The 3D globe component properties in Framer.
The 3D globe component properties in Framer.
The 3D globe component properties in Framer.
