dot-globe

Minimal 3D dot globe for React, built with Three.js and NASA Black Marble night lights data. Zero config, one import.

Install

npm install dot-globe

DotGlobe

import { DotGlobe } from "dot-globe"

<DotGlobe />

Examples

// Transparent overlay on any page
<DotGlobe backgroundOpacity={0} />

// Dense, detailed dots with no atmosphere
<DotGlobe gridStep={0.5} dotSize={3} atmosphere={false} />

// Slow rotation, tilted view
<DotGlobe rotationSpeed={0.0002} tilt={[15, -10]} />

// Custom background at 50% opacity
<DotGlobe backgroundColor={0x111122} backgroundOpacity={0.5} />

Prop	Type	Default	Description
gridStep	number	0.9	Grid step in degrees — smaller = more dots
dotSize	number	1.0	Base dot size multiplier
radius	number	7	Globe radius in scene units
tilt	[number, number]	[35, -23.5]	Axis tilt in degrees [x, z]
rotationSpeed	number	0.0006	Rotation speed (radians/frame)
chars	string	"."	ASCII character(s) for dots
atmosphere	boolean	true	Show atmosphere rim glow
backgroundColor	number	0x000000	Background color as hex number
backgroundOpacity	number	1.0	Background opacity (0 = transparent)
nightImageUrl	string	bundled	Custom night lights texture URL
className	string	—	Container class name
style	CSSProperties	—	Container inline styles
width	string | number	"100%"	Container width
height	string | number	"100%"	Container height

---

DotGlobeMin

A lighter variant with uniform dots and transaction-style pulse animations.

import { DotGlobeMin } from "dot-globe"

<DotGlobeMin />

Examples

// Brighter, faster pulses
<DotGlobeMin minBrightness={0.5} maxBrightness={1.0} pulseSpeed={2} />

// Subtle and slow
<DotGlobeMin minBrightness={0.1} maxBrightness={0.6} pulseSpeed={0.5} />

// Rapid fire pulses
<DotGlobeMin pulseFrequency={3} pulseSpeed={1.5} />

// Transparent overlay with blue dots — layer on top of any site
<DotGlobeMin backgroundOpacity={0} dotColor="#4488ff" />

// Dark blue background at 50% opacity
<DotGlobeMin backgroundColor={0x000033} backgroundOpacity={0.5} dotColor="#88ccff" />

// Green matrix style
<DotGlobeMin dotColor="#00ff88" minBrightness={0.2} pulseFrequency={5} pulseSpeed={2} />

// Tilted with slow rotation
<DotGlobeMin tilt={[25, -15]} rotationSpeed={0.0003} />

Prop	Type	Default	Description
minBrightness	number	0.35	Minimum dot brightness (0–1)
maxBrightness	number	1.0	Maximum dot brightness (0–1)
pulseSpeed	number	1.0	Pulse fade speed — higher = faster
pulseFrequency	number	1.0	Pulse rate — higher = more frequent
dotSize	number	1.0	Base dot size
dotColor	string	"#ffffff"	Dot color as CSS hex string
tilt	[number, number]	[0, 0]	Axis tilt in degrees [x, z]
rotationSpeed	number	0.0008	Rotation speed (radians/frame)
backgroundColor	number	0x000000	Background color as hex number
backgroundOpacity	number	1.0	Background opacity (0 = transparent)
nightImageUrl	string	bundled	Custom night lights texture URL
className	string	—	Container class name
style	CSSProperties	—	Container inline styles
width	string | number	"100%"	Container width
height	string | number	"100%"	Container height

---

Embed (Webflow, HTML, no-build)

<iframe src="https://kurt.xyz/dot-globe/embed" style="width: 100%; height: 100vh; border: none;"></iframe>

Or the min variant:

<iframe src="https://kurt.xyz/dot-globe/embed-min" style="width: 100%; height: 100vh; border: none;"></iframe>

Customize with URL params:

<!-- Brighter, faster pulses -->
<iframe src="https://kurt.xyz/dot-globe/embed-min?minBrightness=0.5&pulseSpeed=2" style="width: 100%; height: 100vh; border: none;"></iframe>

<!-- Transparent overlay with colored dots -->
<iframe src="https://kurt.xyz/dot-globe/embed-min?backgroundOpacity=0&dotColor=4488ff" style="width: 100%; height: 100vh; border: none;"></iframe>

<!-- Rapid pulses, green dots -->
<iframe src="https://kurt.xyz/dot-globe/embed-min?pulseFrequency=5&dotColor=00ff88" style="width: 100%; height: 100vh; border: none;"></iframe>

<!-- Detailed globe, no atmosphere -->
<iframe src="https://kurt.xyz/dot-globe/embed?dotSize=3&gridStep=0.5&atmosphere=false" style="width: 100%; height: 100vh; border: none;"></iframe>

<!-- Slow rotation, custom tilt -->
<iframe src="https://kurt.xyz/dot-globe/embed?rotationSpeed=0.0002&tiltX=15&tiltZ=-10" style="width: 100%; height: 100vh; border: none;"></iframe>

License

MIT