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

New

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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Interactive smart door lock with green unlock indicator

    Skeuomorphic Door Handle Interaction in Framer

    Component

    Interactive smart door lock with green unlock indicator

    Skeuomorphic Door Handle Interaction in Framer

    Component

  • ⁠Contact email link hover: heyprianca@gmail.com

    Click to Copy Email in Framer

    Component

    ⁠Contact email link hover: heyprianca@gmail.com

    Click to Copy Email in Framer

    Component