---
title: "3D Rotating Planet — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Create an out-of-this-world experience with the 3D Rotating Planet."
canonical: "https://framer.elliotli.dev/component/3d-rotating-planet"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/3D Rotating Planet

# 3D Rotating Planet

Animated 3D planet & starfield.

[View on Framer](https://framer.com/marketplace/components/3d-rotating-planet/?via=elliot-li)

![3D Rotating Planet preview image 1](https://framer.elliotli.dev/og/component/3d-rotating-planet/8fe41482f695df4b/1600x1200.jpg)

## Summary

Create an out-of-this-world experience with the 3D Rotating Planet.

## Description

Create an out-of-this-world experience with the **3D Rotating Planet**. This high-performance **WebGL component** renders a procedurally generated globe with realistic lighting, terrain structures, and an atmospheric glow—all without the need for heavy video files or texture assets.

Powered by custom GLSL shaders, it allows you to simulate Earth, Mars, or abstract digital worlds by simply tweaking the color palette. It comes with a built-in twinkling **starfield background** and responsive positioning controls, making it the ultimate visual asset for **tech startups**, **space agencies**, and futuristic landing pages.

**Functions (Key Features):**

-   🌍 **Procedural Generation:** Uses mathematical noise to create unique terrain and cloud patterns instantly (no image textures required).
    
-   ⚡ **WebGL Powered:** Renders natively on the GPU for buttery-smooth 60fps rotation and lighting effects.
    
-   🎨 **Full Color Control:** Customize the Planet, Structure (Land), and Atmosphere colors to match your brand identity.
    
-   ✨ **Dynamic Starfield:** Includes an optional, animated background of twinkling stars.
    
-   📍 **Responsive Layout:** Easily align the planet to the Left, Center, or Right to fit alongside your hero text.
    

**How to Use:**

1.  **Insert:** Drag the **3D Rotating Planet** component onto your canvas (set width/height to 100% for best results).
    
2.  **Theme:** Choose your colors. For an Earth-like look, use Blue (Planet), Green/Teal (Structure), and Light Blue (Atmosphere).
    
3.  **Positioning:** Use the **Position** property to move the planet. Select "Right" to place text on the left, or "Center" for a standalone view.
    
4.  **Size & Speed:** Adjust **Planet Size %** to zoom in/out and **Rotation Speed** to control how fast the day/night cycle passes.
    
5.  **Background:** Toggle **Show Stars** on or off depending on your section's design.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8105

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-02-16
- **Updated**: 2026-07-26
- **Added**: 2026-02-09
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background