Globe Component

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/Globe.jsx
• src/components/Solutions.jsx
• src/components/Features.jsx
• src/components/ProductNarrative.jsx
• package.json

The Globe component is a reusable React component that renders an interactive, animated 3D globe. It is built using the cobe library to create a visually engaging data visualization. Its primary purpose within the application is to represent global operations, such as the "Global Logistics" solution and "Global Real-time Tracking" feature, by displaying markers at specific geographical locations.

The component is self-contained, managing its own state, animation loop, and user interactions for rotation. It is designed to be embedded within other parent components, such as the Solutions section, to provide a dynamic visual element.

Sources: src/components/Globe.jsx, src/components/Solutions.jsx:138, src/components/Features.jsx:20-26, package.json:11

Core Functionality & Dependencies

The component's core functionality is provided by the cobe library, a lightweight library for creating interactive globes. The createGlobe function from this library is the central piece used to initialize the globe visualization on a <canvas> element.

Sources: src/components/Globe.jsx:2, package.json:11

Initialization Flow

The globe is initialized within a useEffect hook, ensuring it is created only after the component mounts. The flow involves setting up a resize listener, creating the globe instance with a set of configurations, and starting the render loop.

Configuration and Initialization

The globe's appearance and behavior are defined by a configuration object passed to the createGlobe function. This includes colors, brightness, map details, and a predefined set of markers.

Sources: src/components/Globe.jsx:16-46

Globe Configuration Options

Property	Value	Description
devicePixelRatio	2	Sets the pixel ratio for rendering on high-density screens.
width	width * 2	The width of the canvas, doubled for higher resolution.
height	width * 2	The height of the canvas, derived from the width to maintain aspect ratio.
phi	0	The initial polar angle (vertical rotation).
theta	0.3	The initial azimuthal angle (horizontal rotation).
dark	1	A boolean-like value (0 or 1) to set the dark theme.
diffuse	1.2	The amount of diffuse reflection from the globe's surface.
mapSamples	16000	The number of samples to use for the map texture, affecting detail.
mapBrightness	6	The brightness of the map texture.
baseColor	[0.3, 0.3, 0.3]	The base color of the globe's landmasses.
markerColor	[0.1, 0.8, 1]	The color of the location markers.
glowColor	[1, 1, 1]	The color of the glow effect around the globe.
markers	[...]	An array of objects defining locations and sizes for markers.
onRender	(state) => { ... }	A callback function executed on every frame to update the globe's state.

Sources: src/components/Globe.jsx:17-46

Predefined Markers

The component includes a hardcoded list of markers to display on the globe, representing key locations in North America, Europe, and Asia.

Location	Coordinates	Size
San Francisco, USA	[37.7595, -122.4367]	0.03
New York, USA	[40.7128, -74.006]	0.03
London, UK	[51.5074, -0.1278]	0.03
Berlin, Germany	[52.52, 13.405]	0.03
Tokyo, Japan	[35.6762, 139.6503]	0.03
Singapore	[1.3521, 103.8198]	0.03
Hong Kong	[22.3193, 114.1694]	0.03

Sources: src/components/Globe.jsx:29-39

Rendering and Animation

The globe's animation is handled by the onRender callback. By default, if the user is not interacting with the globe, its phi value is incremented on each frame, causing a continuous rotation.

The component also handles window resizing gracefully by updating the canvas dimensions to match its container's width. A simple fade-in transition is applied on initial load for a smoother visual entry.

// src/components/Globe.jsx:41-46
onRender: (state) => {
    if (!pointerInteracting.current) {
        phi += 0.005;
    }
    state.phi = phi + pointerInteractionMovement.current;
    state.width = width * 2;
    state.height = width * 2;
},

Sources: src/components/Globe.jsx:12-14, 41-50, 80-82

User Interaction

The component allows users to manually rotate the globe via mouse drag or touch gestures. It uses React refs (pointerInteracting and pointerInteractionMovement) to track the interaction state and movement delta without causing re-renders.

The following events are handled on the <canvas> element:

• onPointerDown: Captures the initial pointer position and changes the cursor to 'grabbing'.
• onPointerUp / onPointerOut: Resets the interaction state when the user releases the pointer or it leaves the canvas.
• onMouseMove / onTouchMove: Calculates the horizontal movement delta and updates pointerInteractionMovement to adjust the globe's rotation in the onRender loop.

Interaction Sequence Diagram

This diagram illustrates the flow of events when a user drags the globe.

Component Usage

The Globe component is imported and utilized within the Solutions component. It is conditionally rendered as part of the "Global Logistics" tab, providing a large-scale, interactive visual that reinforces the global nature of the service.

// src/components/Solutions.jsx:136-140
{activeTab === 0 && (
    <motion.div /* ... */ >
        <div className="w-[140%] -mt-20">
            <Globe />
        </div>
        {/* ... */}
    </motion.div>
)}

The component's theme of global connectivity is also echoed in other parts of the application, such as the "Global Real-time Tracking" feature and the "Real-time Visibility" product narrative, making it a key visual motif.

Sources: src/components/Solutions.jsx:138, src/components/Features.jsx:20-26, src/components/ProductNarrative.jsx:23-25

Styling and Appearance

The component is wrapped in a div that centers the canvas and maintains a square aspect ratio. An additional div is positioned behind the canvas to create a soft, ambient blue glow, enhancing the visual effect.

The canvas itself has an opacity transition for a smooth fade-in effect on load.

// src/components/Globe.jsx:62-88
<div
    className={`relative flex items-center justify-center w-full aspect-square ${className || ''}`}
>
    <canvas
        ref={canvasRef}
        // ... event handlers
        style={{
            width: '100%',
            height: '100%',
            cursor: 'grab',
            contain: 'layout paint size',
            opacity: 0,
            transition: 'opacity 1s ease',
        }}
    />

    {/* Ambient Glow Behind */}
    <div className="absolute inset-0 bg-blue-500/20 blur-[100px] rounded-full -z-10 pointer-events-none" />
</div>

Sources: src/components/Globe.jsx:62-88