Globe Loader is a two-in-one loading component that packs a full interactive globe and a geometric dot-sphere into the same file. Toggle between modes from the properties panel without swapping components.
Features
Globe mode: real country outlines on an orthographic projection with drag-to-rotate physics, inertia, and cursor-follow tilt
Dot Sphere mode: ~500 depth-shaded dots on a lat/long grid with a gentle breathing pulse
Three animated SVG rings with dash-drift and hover slowdown
Spark diamonds and tick markers for extra mechanical detail
Responsive to any square or rectangular frame
Marketplace-safe: static-render fallback, viewport pause, tab pause, no runtime CDN imports
What you can customise
Colors are exposed flat at the top so you can bind each one to a Framer Color Style for instant theming:
Background - stage color behind the loader
Land / Borders - fill and stroke for globe landmasses
Back Dots / Front Dots - depth-gradient extremes for dot sphere
Grouped controls:
Motion - spin speed, hover speed, and tilt for globe; speed and breathing for dot sphere
Interaction - drag, cursor follow, and sensitivity (globe only)
Dot Interaction - drag-to-spin, cursor-follow tilt, and sensitivity (dot sphere only)
Globe - disc width, land opacity, grid lines, and vignette
Outer / Mid / Inner Ring - radius, dash pattern, period, and direction
Ticks - cardinal tick marks on the mid ring
Sparks - tiny diamonds that orbit the inner edge
Hover Hint - dashed guide ring that fades in on hover
Sphere - dot size, latitude bands, and base radius (dot sphere only)
Performance - frame-rate cap to save battery (dot sphere only)
How to use
Drop the component onto your canvas.
Choose Globe or Dot Sphere from the Mode control.
Resize the frame to fit your layout.
Tweak colors and motion to match your palette.
Lower the FPS cap if you need to reduce CPU use.
Tips
Pair dark land with a warm off-white background for the signature premium look.
Enable the grid in globe mode for a technical, data-visualisation feel.
The component is fully self-contained: no external images, fonts, or data to load.
Refund Policy: All sales are final. No refunds.
Free email support: framer@muhmad.me
More Components: sbarah.com
Thanks 🎉🌵
