Globe

Installation

Usage

import Globe from "@/components/ruixen/globe";
 
export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-black">
      <Globe />
    </div>
  );
}

Features

• 3D Earth Appearance: Realistic globe with continent textures
• Continuous Rotation: Smooth 360-degree rotation animation
• Atmospheric Glow: Subtle glow effect around the globe
• CSS-Only Animation: No JavaScript required for animation
• Responsive Design: Scales with container size
• Dark Theme Optimized: Looks great on dark backgrounds

Animation Details

• Earth Rotation: 20-second continuous rotation cycle
• Atmosphere Effect: Pulsing glow with 3-second cycle
• Smooth Transitions: Linear animation for consistent speed
• Background Texture: Continent silhouettes on blue base

Customization

You can customize the globe appearance:

// Custom container styling
<div className="relative">
  <Globe />
  <div className="absolute inset-0 bg-gradient-to-t from-transparent to-blue-900/20" />
</div>
 
// Different sizes
<div className="scale-75">
  <Globe />
</div>

CSS Variables

You can override the animation timing:

.globe-container {
  --rotation-duration: 30s; /* Slower rotation */
  --glow-duration: 2s; /* Faster glow */
}

Use Cases

Perfect for:

• Global Services: Worldwide reach visualization
• Travel Websites: International destinations
• Environmental Apps: Earth and climate themes
• Space Applications: Astronomy and science
• Loading Screens: Unique loading animations
• Hero Sections: Eye-catching visual elements