Depth Globe Component for Framer

Copy component

Copy component

Depth Globe Component for Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to Make $10K+ with Framer in 60 days

$10k Undercover Event

Component

Depth Globe Component for Framer

This is a Depth Globe component for Framer, recreated from Yoa’s original work. Copy and paste it into your projects, tweak the controls, spin the globe, and experiment with the terrain, lighting, and depth to shape the look you want.

image of Nandi Muzsik
profile image of Emanuele
image of Prianca S.
Image of Yoa

Created by

⁠Framer Depth Globe interactive 3D point-cloud component

About the resource

To use the component, add the Depth Globe to your Framer project and adjust the controls to shape how it looks and behaves. The Detail setting lets you choose the resolution of the globe points, helping balance visual detail and performance with Low, Medium, or High options.

Under Globe settings, you can control the scale, terrain depth, and the look of the points using dot size, softness, and smoothing. Motion can also be adjusted, enable Spin for slow auto-rotation or keep it off and drag the globe to orbit it manually. When Pixels is on, the terrain points animate in with a subtle wobble; when off, the globe appears instantly.

You can also customize colors, glow, and lighting. Adjust the background, land, and water colors, control how the ocean blends into the terrain, and fine-tune the bloom and lighting for the final look. The Preview toggle lets the animation run in the canvas or stay frozen to keep the editor smoother while working.

About the resource

To use the component, add the Depth Globe to your Framer project and adjust the controls to shape how it looks and behaves. The Detail setting lets you choose the resolution of the globe points, helping balance visual detail and performance with Low, Medium, or High options.

Under Globe settings, you can control the scale, terrain depth, and the look of the points using dot size, softness, and smoothing. Motion can also be adjusted, enable Spin for slow auto-rotation or keep it off and drag the globe to orbit it manually. When Pixels is on, the terrain points animate in with a subtle wobble; when off, the globe appears instantly.

You can also customize colors, glow, and lighting. Adjust the background, land, and water colors, control how the ocean blends into the terrain, and fine-tune the bloom and lighting for the final look. The Preview toggle lets the animation run in the canvas or stay frozen to keep the editor smoother while working.

About the resource

To use the component, add the Depth Globe to your Framer project and adjust the controls to shape how it looks and behaves. The Detail setting lets you choose the resolution of the globe points, helping balance visual detail and performance with Low, Medium, or High options.

Under Globe settings, you can control the scale, terrain depth, and the look of the points using dot size, softness, and smoothing. Motion can also be adjusted, enable Spin for slow auto-rotation or keep it off and drag the globe to orbit it manually. When Pixels is on, the terrain points animate in with a subtle wobble; when off, the globe appears instantly.

You can also customize colors, glow, and lighting. Adjust the background, land, and water colors, control how the ocean blends into the terrain, and fine-tune the bloom and lighting for the final look. The Preview toggle lets the animation run in the canvas or stay frozen to keep the editor smoother while working.

Framer Depth Globe component settings panel

The depth globe component properties in Framer.

Framer Depth Globe component settings panel

The depth globe component properties in Framer.

Framer Depth Globe component settings panel

The depth globe component properties in Framer.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Nandi portrait's background

More resources

More resources

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component