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

'use client'
import React, { useEffect, useRef, useState } from 'react'
import createGlobe from 'cobe'
import { cn } from '@/lib/utils'
interface EarthProps {
  className?: string
  theta?: number
  dark?: number
  scale?: number
  diffuse?: number
  mapSamples?: number
  mapBrightness?: number
  baseColor?: [number, number, number]
  markerColor?: [number, number, number]
  glowColor?: [number, number, number]
}
const Earth: React.FC<EarthProps> = ({
  className,
  theta = 0.25,
  dark = 1,
  scale = 1.1,
  diffuse = 1.2,
  mapSamples = 40000,
  mapBrightness = 6,
  baseColor = [0.4, 0.6509, 1],
  markerColor = [1, 0, 0],
  glowColor = [0.2745, 0.5765, 0.898],
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
 
  useEffect(() => {
    let width = 0
    const onResize = () =>
      canvasRef.current && (width = canvasRef.current.offsetWidth)
    window.addEventListener('resize', onResize)
    onResize()
    let phi = 0
 
    onResize()
    const globe = createGlobe(canvasRef.current!, {
      devicePixelRatio: 2,
      width: width * 2,
      height: width * 2,
      phi: 0,
      theta: theta,
      dark: dark,
      scale: scale,
      diffuse: diffuse,
      mapSamples: mapSamples,
      mapBrightness: mapBrightness,
      baseColor: baseColor,
      markerColor: markerColor,
      glowColor: glowColor,
      opacity: 1,
      offset: [0, 0],
      markers: [
        // longitude latitude
      ],
      onRender: (state: Record<string, any>) => {
        // Called on every animation frame.
        // `state` will be an empty object, return updated params.\
        state.phi = phi
        phi += 0.003
      },
    })
 
    return () => {
      globe.destroy()
    }
  }, [])
 
  return (
    <div
      className={cn(
        'flex items-center justify-center z-[10] w-full max-w-[350px] mx-auto',
        className
      )}
    >
      <canvas
        ref={canvasRef}
        style={{
          width: '100%',
          height: '100%',
          maxWidth: '100%',
          aspectRatio: '1',
        }}
      />
    </div>
  )
}
 
export default Earth
;('use client')
import React, { useEffect, useRef, useState } from 'react'
import createGlobe from 'cobe'
import { cn } from '@/lib/utils'
interface EarthProps {
  className?: string
  theta?: number
  dark?: number
  scale?: number
  diffuse?: number
  mapSamples?: number
  mapBrightness?: number
  baseColor?: [number, number, number]
  markerColor?: [number, number, number]
  glowColor?: [number, number, number]
}
const Earth: React.FC<EarthProps> = ({
  className,
  theta = 0.25,
  dark = 1,
  scale = 1.1,
  diffuse = 1.2,
  mapSamples = 40000,
  mapBrightness = 6,
  baseColor = [0.4, 0.6509, 1],
  markerColor = [1, 0, 0],
  glowColor = [0.2745, 0.5765, 0.898],
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
 
  useEffect(() => {
    let width = 0
    const onResize = () =>
      canvasRef.current && (width = canvasRef.current.offsetWidth)
    window.addEventListener('resize', onResize)
    onResize()
    let phi = 0
 
    onResize()
    const globe = createGlobe(canvasRef.current!, {
      devicePixelRatio: 2,
      width: width * 2,
      height: width * 2,
      phi: 0,
      theta: theta,
      dark: dark,
      scale: scale,
      diffuse: diffuse,
      mapSamples: mapSamples,
      mapBrightness: mapBrightness,
      baseColor: baseColor,
      markerColor: markerColor,
      glowColor: glowColor,
      opacity: 1,
      offset: [0, 0],
      markers: [
        // longitude latitude
      ],
      onRender: (state: Record<string, any>) => {
        // Called on every animation frame.
        // `state` will be an empty object, return updated params.\
        state.phi = phi
        phi += 0.003
      },
    })
 
    return () => {
      globe.destroy()
    }
  }, [])
 
  return (
    <div
      className={cn(
        'flex items-center justify-center z-[10] w-full max-w-[350px] mx-auto',
        className
      )}
    >
      <canvas
        ref={canvasRef}
        style={{
          width: '100%',
          height: '100%',
          maxWidth: '100%',
          aspectRatio: '1',
        }}
      />
    </div>
  )
}
 
export 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