Animated Globe

A globe component styled with customizations, created using the Cobe library for interactive, 3D globe visuals

To Get the sparkle code Please Click That Link here

Installation

npm install cobe

globe.tsx

1'use client';
2import React, { useEffect, useRef, useState } from 'react';
3import createGlobe from 'cobe';
4import { cn } from '@/lib/utils';
5interface EarthProps {
6  className?: string;
7  theta?: number;
8  dark?: number;
9  scale?: number;
10  diffuse?: number;
11  mapSamples?: number;
12  mapBrightness?: number;
13  baseColor?: [number, number, number];
14  markerColor?: [number, number, number];
15  glowColor?: [number, number, number];
16}
17const Earth: React.FC<EarthProps> = ({
18  className,
19  theta = 0.25,
20  dark = 1,
21  scale = 1.1,
22  diffuse = 1.2,
23  mapSamples = 40000,
24  mapBrightness = 6,
25  baseColor = [0.4, 0.6509, 1],
26  markerColor = [1, 0, 0],
27  glowColor = [0.2745, 0.5765, 0.898],
28}) => {
29  const canvasRef = useRef<HTMLCanvasElement>(null);
30
31  useEffect(() => {
32    let width = 0;
33    const onResize = () =>
34      canvasRef.current && (width = canvasRef.current.offsetWidth);
35    window.addEventListener('resize', onResize);
36    onResize();
37    let phi = 0;
38
39    onResize();
40    const globe = createGlobe(canvasRef.current!, {
41      devicePixelRatio: 2,
42      width: width * 2,
43      height: width * 2,
44      phi: 0,
45      theta: theta,
46      dark: dark,
47      scale: scale,
48      diffuse: diffuse,
49      mapSamples: mapSamples,
50      mapBrightness: mapBrightness,
51      baseColor: baseColor,
52      markerColor: markerColor,
53      glowColor: glowColor,
54      opacity: 1,
55      offset: [0, 0],
56      markers: [
57        // longitude latitude
58      ],
59      onRender: (state: Record<string, any>) => {
60        // Called on every animation frame.
61        // `state` will be an empty object, return updated params.\
62        state.phi = phi;
63        phi += 0.003;
64      },
65    });
66
67    return () => {
68      globe.destroy();
69    };
70  }, []);
71
72  return (
73    <div
74      className={cn(
75        'flex items-center justify-center z-[10] w-full max-w-[350px] mx-auto',
76        className
77      )}
78    >
79      <canvas
80        ref={canvasRef}
81        style={{
82          width: '100%',
83          height: '100%',
84          maxWidth: '100%',
85          aspectRatio: '1',
86        }}
87      />
88    </div>
89  );
90};
91
92export default Earth;

Props

Prop	Type	Default	Description
className	string	undefined	Optional CSS class for styling the Earth component.
theta	number	0.25	Controls the rotational angle of the Earth.
dark	number	1	Controls the darkness level of the Earth.
scale	number	1.1	Controls the scaling factor of the Earth.
diffuse	number	1.2	Controls the diffuse light intensity of the Earth.
mapSamples	number	40000	The number of samples used for the map texture.
mapBrightness	number	6	The brightness of the map texture.
baseColor	[number, number, number]	[0.4, 0.6509, 1]	The base color of the Earth as an RGB array.
markerColor	[number, number, number]	[1, 0, 0]	The color of the markers on the Earth as an RGB array.
glowColor	[number, number, number]	[0.2745, 0.5765, 0.898]	The color of the glow effect on the Earth as an RGB array.

Example

Light Globe

Sparkles Globe

Noise Footers