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