Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Interactive 3D Globe

Pro

A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.

3dwebglthreeglobeearthinteractive
Interactive 3D Globe component preview

Overview

Interactive 3D Globe is a React and Tailwind CSS 3D Earth globe for landing pages, in Next.js or any React app, built on three.js, React Three Fiber, and drei. A custom shader blends day and night textures along a terminator placed from the real sun position at the current UTC time, wrapped in a soft atmosphere. Drag to orbit with OrbitControls, and it can auto rotate at a speed you set, except under reduced motion. config covers atmosphere, camera, lighting, and wireframe. The Earth textures load from unpkg and jsDelivr, so copy them to your own host for production.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add interactive-globe

Usage

Import InteractiveGlobe from @/components/wensity/interactive-globe and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { InteractiveGlobe } from "@/components/wensity/interactive-globe";


export default function InteractiveGlobeDemo() {
  return (
    <InteractiveGlobe
      config={{
        atmosphereColor: "#4da6ff",
        atmosphereIntensity: 0.38,
        autoRotateSpeed: 0.3,
      }}
    />
  );
}

Props

PropTypeDefaultDescription
configInteractiveGlobeConfig-Globe visuals: atmosphere, auto-rotate, camera, lighting, and related knobs.

Related components

  • Split-Flap Display component preview

    Split-Flap Display

    A ceramic and graphite split-flap device that ripples each flap into your message.

  • Animated Code Diff Viewer component preview

    Animated Code Diff Viewer

    Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

  • Animated Terminal component preview

    Animated Terminal

    A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.

  • Tinder-Style Swipe Cards component preview

    Tinder-Style Swipe Cards

    Tinder-style swipe cards where the top card flicks off under your thumb and the one underneath rises in real time.

Featured in React 3D components.