diff --git a/.gitignore b/.gitignore
index 8727576..d8fcf9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@ node_modules/
 .cache/
 /public
 .DS_store
-./dist
\ No newline at end of file
+./dist
+.idea
\ No newline at end of file
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
index d5536d0..aa7fa0a 100644
--- a/.idea/prettier.xml
+++ b/.idea/prettier.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myConfigurationMode" value="MANUAL" />
     <option name="myRunOnSave" value="true" />
     <option name="myRunOnReformat" value="true" />
     <option name="myFilesPattern" value="**/*.{js,ts,jsx,tsx,vue,astro,json}" />
diff --git a/.idea/runConfigurations/start.xml b/.idea/runConfigurations/start.xml
deleted file mode 100644
index 0ac6197..0000000
--- a/.idea/runConfigurations/start.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json" />
-    <command value="run" />
-    <scripts>
-      <script value="start" />
-    </scripts>
-    <node-interpreter value="project" />
-    <envs />
-    <method v="2" />
-  </configuration>
-</component>
\ No newline at end of file
diff --git a/.idea/website-gatsby.iml b/.idea/website-gatsby.iml
index 0c8867d..26ef0e6 100644
--- a/.idea/website-gatsby.iml
+++ b/.idea/website-gatsby.iml
@@ -5,6 +5,7 @@
       <excludeFolder url="file://$MODULE_DIR$/temp" />
       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/public" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
diff --git a/.prettierignore b/.prettierignore
index e05264a..c167dd8 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,4 +3,7 @@ node_modules
 /public
 .env
 /src/public
-/src/static
+
+/**/static
+
+*.glsl
diff --git a/astro.config.ts b/astro.config.ts
index 2462bfc..a388b98 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -17,10 +17,12 @@ export default defineConfig({
 		name: "test",
 		hooks: {
 			"astro:build:done": async ({ routes }) => {
+				if (process.env.NODE_ENV !== "production") return;
+
 				const files = routes
 					.filter((route) => route.type === "page")
 					.map(({ distURL }) => distURL)
-					.filter((url): url is URL => typeof url !== 'undefined');
+					.filter((url): url is URL => typeof url !== "undefined");
 
 				for (const { pathname } of files) {
 					const htmlFile = readFileSync(pathname, "utf-8");
diff --git a/package-lock.json b/package-lock.json
index 32cafb0..17adff0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,12 @@
 			"name": "mrflashaccount-website",
 			"version": "1.0.0",
 			"dependencies": {
-				"clsx": "1.2.1"
+				"tailwind-merge": "2.2.0",
+				"three": "0.160.0"
 			},
 			"devDependencies": {
 				"@types/node": "20.11.0",
+				"@types/three": "0.160.0",
 				"astro": "4.1.2",
 				"autoprefixer": "10.4.16",
 				"htmlnano": "2.1.0",
@@ -449,6 +451,17 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
+		"node_modules/@babel/runtime": {
+			"version": "7.23.8",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
+			"integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@babel/template": {
 			"version": "7.22.15",
 			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -1278,12 +1291,36 @@
 				"undici-types": "~5.26.4"
 			}
 		},
+		"node_modules/@types/stats.js": {
+			"version": "0.17.3",
+			"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+			"integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+			"dev": true
+		},
+		"node_modules/@types/three": {
+			"version": "0.160.0",
+			"resolved": "https://registry.npmjs.org/@types/three/-/three-0.160.0.tgz",
+			"integrity": "sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==",
+			"dev": true,
+			"dependencies": {
+				"@types/stats.js": "*",
+				"@types/webxr": "*",
+				"fflate": "~0.6.10",
+				"meshoptimizer": "~0.18.1"
+			}
+		},
 		"node_modules/@types/unist": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
 			"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==",
 			"dev": true
 		},
+		"node_modules/@types/webxr": {
+			"version": "0.5.10",
+			"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
+			"integrity": "sha512-n3u5sqXQJhf1CS68mw3Wf16FQ4cRPNBBwdYLFzq3UddiADOim1Pn3Y6PBdDilz1vOJF3ybLxJ8ZEDlLIzrOQZg==",
+			"dev": true
+		},
 		"node_modules/@ungap/structured-clone": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -1996,14 +2033,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/clsx": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-			"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/color": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -2611,6 +2640,12 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.6.10",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+			"integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+			"dev": true
+		},
 		"node_modules/fill-range": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -4076,6 +4111,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/meshoptimizer": {
+			"version": "0.18.1",
+			"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+			"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+			"dev": true
+		},
 		"node_modules/micromark": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
@@ -6009,6 +6050,11 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+		},
 		"node_modules/rehype": {
 			"version": "13.0.1",
 			"resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz",
@@ -7266,6 +7312,18 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/tailwind-merge": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.0.tgz",
+			"integrity": "sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==",
+			"dependencies": {
+				"@babel/runtime": "^7.23.5"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/dcastil"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.4.1",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
@@ -7373,6 +7431,11 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/three": {
+			"version": "0.160.0",
+			"resolved": "https://registry.npmjs.org/three/-/three-0.160.0.tgz",
+			"integrity": "sha512-DLU8lc0zNIPkM7rH5/e1Ks1Z8tWCGRq6g8mPowdDJpw1CFBJMU7UoJjC6PefXW7z//SSl0b2+GCw14LB+uDhng=="
+		},
 		"node_modules/timsort": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
diff --git a/package.json b/package.json
index 20e64f1..f260bf1 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,12 @@
 		"node": "^20"
 	},
 	"dependencies": {
-		"clsx": "1.2.1"
+		"three": "0.160.0",
+		"tailwind-merge": "2.2.0"
 	},
 	"devDependencies": {
 		"@types/node": "20.11.0",
+		"@types/three": "0.160.0",
 		"astro": "4.1.2",
 		"autoprefixer": "10.4.16",
 		"htmlnano": "2.1.0",
diff --git a/src/components/earth/earth.astro b/src/components/earth/earth.astro
new file mode 100644
index 0000000..1d15353
--- /dev/null
+++ b/src/components/earth/earth.astro
@@ -0,0 +1,27 @@
+---
+import { Picture } from 'astro:assets';
+import Earth from "./static/earth-alpha-map.png";
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+	className?: string;
+}
+
+const { className } = Astro.props;
+---
+
+<my-earth class={twMerge("block aspect-[4/3] w-[100%]", className)}>
+	<Picture
+		src={Earth}
+		class="invisible"
+		formats={["webp", "png"]}
+		aspectRatio="2:1"
+		alt=""
+		role="presentation"
+		aria-hidden="true"
+	/>
+</my-earth>
+<script>
+    import {MyEarth} from "./my-earth.wc.ts";
+		customElements.define("my-earth", MyEarth);
+</script>
diff --git a/src/components/earth/my-earth.wc.ts b/src/components/earth/my-earth.wc.ts
new file mode 100644
index 0000000..301d27f
--- /dev/null
+++ b/src/components/earth/my-earth.wc.ts
@@ -0,0 +1,296 @@
+import {
+	AmbientLight,
+	Camera,
+	Clock,
+	Mesh,
+	MeshBasicMaterial,
+	PerspectiveCamera,
+	Scene,
+	ShaderMaterial,
+	SphereGeometry,
+	Vector2,
+	Vector3,
+	WebGLRenderer,
+	type BufferGeometry,
+} from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { createDotsSphereMesh, spherePointToUV } from "./utils";
+
+const RADIUS = 0.765 * 0.88;
+
+const SCENE_ANTIALIAS = true;
+const SCENE_ALPHA = true;
+const SCENE_BACKGROUND_COLOR = 0x000000;
+
+const CAMERA_FOV = 25;
+const CAMERA_NEAR = 45;
+const CAMERA_FAR = 500;
+const CAMERA_X = 150;
+const CAMERA_Y = 90;
+const CAMERA_Z = -150;
+
+const SPHERE_RADIUS = 30;
+const LATITUDE_COUNT = 256;
+const DOT_DENSITY = 1;
+
+const DOT_SIZE = 0.1;
+// red color
+const DOT_COLOR = 0xffffff;
+// const DOT_COLOR = 0x651119;
+// const DOT_COLOR = 0x333333;
+
+function sampleImage(imageData: ImageData, uv: Vector2) {
+	// Calculate and return the data for the point, from the UV coordinates.
+	const point =
+		4 * Math.floor(uv.x * imageData.width) +
+		Math.floor(uv.y * imageData.height) * (4 * imageData.width);
+
+	return imageData.data.slice(point, point + 4);
+}
+
+export class MyEarth extends HTMLElement {
+	#canvas: HTMLCanvasElement;
+	#scene: Scene;
+	#earth: Mesh<SphereGeometry, MeshBasicMaterial>;
+	#dotsSphereMesh: Mesh<BufferGeometry, ShaderMaterial>;
+	#camera: PerspectiveCamera;
+	#clock: Clock;
+	#controls: OrbitControls;
+	#renderer: WebGLRenderer;
+	#animationID: number | null;
+	#texture: HTMLImageElement;
+	#resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
+		const sizeOfTheContainer = entries[0].contentRect;
+		if (sizeOfTheContainer === undefined) return;
+		this.#handleResize(sizeOfTheContainer.width, sizeOfTheContainer.height);
+	});
+
+	#dragStartTime: number = 0;
+	#dragTime: number = 0;
+
+	#rotationEnabled = true;
+	#isDragging = false;
+
+	async connectedCallback() {
+		this.attachShadow({ mode: "open" });
+
+		this.style.display = "block";
+		// this.style.mixBlendMode = "difference";
+
+		this.#renderer = new WebGLRenderer({
+			antialias: SCENE_ANTIALIAS,
+			alpha: SCENE_ALPHA,
+		});
+		this.#canvas = this.#renderer.domElement;
+
+		this.#texture = await this.#loadTextures();
+
+		const { scene, sphere, dotsSphereMesh } = this.#createScene(
+			this.#texture,
+			this.#canvas,
+		);
+		this.#dotsSphereMesh = dotsSphereMesh;
+		this.#scene = scene;
+		this.#earth = sphere;
+		this.#camera = this.#createCamera(this.#canvas, this.#earth.position);
+		this.#controls = this.#createControls(this.#camera, this);
+		this.#clock = new Clock();
+
+		this.#handleDPIChange(window.visualViewport?.scale ?? 1);
+
+		this.#resizeObserver.observe(this);
+		window.visualViewport?.addEventListener("resize", () =>
+			this.#handleDPIChange(Math.min(window.visualViewport?.scale ?? 1, 3)),
+		);
+
+		this.shadowRoot?.appendChild(this.#renderer.domElement);
+		this.#run();
+	}
+
+	disconnectedCallback() {
+		this.#resizeObserver.disconnect();
+		this.#animationID && cancelAnimationFrame(this.#animationID);
+	}
+
+	#run = () => {
+		this.#animationID = requestAnimationFrame(this.#run);
+
+		const time = this.#clock.getElapsedTime();
+		this.#updateDragTimer();
+
+		if (this.#rotationEnabled) {
+			this.#camera.position.x = Math.sin(time / 10) * 100;
+			this.#camera.position.z = Math.cos(time / 10) * 100;
+
+			this.#lookAtEarth();
+		}
+
+		this.#dotsSphereMesh.material.uniforms.u_drag_time.value = this.#dragTime;
+		this.#dotsSphereMesh.material.uniforms.u_time.value =
+			performance.now() - this.#dragStartTime;
+
+		this.#controls.update();
+
+		this.#render();
+	};
+
+	#render = () => this.#renderer.render(this.#scene, this.#camera);
+
+	#startDragging() {
+		if (this.#isDragging) return;
+
+		this.#isDragging = true;
+		document.body.style.cursor = "grabbing";
+
+		this.#dragStartTime = performance.now();
+
+		this.#dotsSphereMesh.material.uniforms.u_time.value =
+			performance.now() - this.#dragStartTime;
+	}
+
+	#stopDragging() {
+		this.#isDragging = false;
+	}
+
+	#updateDragTimer() {
+		if (this.#isDragging) {
+			this.#dragTime = performance.now() - this.#dragStartTime;
+		} else {
+			if (this.#dragTime > 0.1) {
+				this.#dragTime = Math.max(0, this.#dragTime * 0.9);
+			}
+		}
+	}
+
+	#loadTextures = () =>
+		new Promise<HTMLImageElement>((resolve, reject) => {
+			const img = this.querySelector("img");
+
+			if (!img) {
+				return reject(new Error("Image not found"));
+			}
+
+			if (img.complete) {
+				return resolve(img);
+			}
+
+			img.onload = () => resolve(img);
+			img.onerror = () => reject(new Error(`Failed to load image ${img.src}`));
+		});
+
+	#handleResize = (width: number, height: number) => {
+		this.#renderer.setSize(width, height);
+		this.#camera.aspect = width / height;
+		this.#camera.updateProjectionMatrix();
+
+		this.#render();
+	};
+
+	#handleDPIChange = (scale: number) => {
+		this.#renderer.setPixelRatio(window.devicePixelRatio * scale);
+	};
+
+	#createCamera = (canvas: HTMLCanvasElement, lookAt: Vector3) => {
+		const camera = new PerspectiveCamera(
+			CAMERA_FOV,
+			canvas.width / canvas.height,
+			CAMERA_NEAR,
+			CAMERA_FAR,
+		);
+
+		camera.position.set(CAMERA_X, CAMERA_Y, CAMERA_Z);
+		camera.lookAt(lookAt);
+
+		return camera;
+	};
+
+	#createControls = (camera: Camera, domElement: HTMLElement) => {
+		const controls = new OrbitControls(camera, domElement);
+
+		controls.enableDamping = true;
+		controls.dampingFactor = 0.01;
+		controls.rotateSpeed = 0.5;
+		controls.enablePan = false;
+		controls.enableZoom = false;
+		controls.minPolarAngle = 270 / 360;
+		controls.maxPolarAngle = (360 + 180) / 360;
+
+		let timeoutId: number | null = null;
+
+		controls.addEventListener("start", () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
+			this.#rotationEnabled = false;
+			this.#startDragging();
+		});
+
+		controls.addEventListener("end", () => {
+			document.body.style.cursor = "";
+			this.#stopDragging();
+		});
+
+		return controls;
+	};
+
+	#createScene = (texture: HTMLImageElement, canvas: HTMLCanvasElement) => {
+		const scene = new Scene();
+
+		const geometryR = new SphereGeometry(SPHERE_RADIUS, 64, 64);
+		const materialR = new MeshBasicMaterial({ color: SCENE_BACKGROUND_COLOR });
+
+		const sphere = new Mesh(geometryR, materialR);
+
+		scene.add(new AmbientLight(0x909090));
+
+		const tempCanvas = document.createElement("canvas");
+
+		tempCanvas.width = texture.width;
+		tempCanvas.height = texture.height;
+
+		const ctx = tempCanvas.getContext("2d") as CanvasRenderingContext2D;
+
+		ctx.drawImage(texture, 0, 0);
+
+		// Read the image data from the canvas context.
+		const imageData = ctx.getImageData(0, 0, texture.width, texture.height);
+
+		// Add the dot mesh to the scene.
+		const dotsSphereMesh = createDotsSphereMesh({
+			latitudeCount: LATITUDE_COUNT,
+			dotDensity: DOT_DENSITY,
+			dotSize: DOT_SIZE,
+			dotColor: DOT_COLOR,
+			sphereRadius: SPHERE_RADIUS,
+			width: canvas.width,
+			height: canvas.height,
+			filter: (dotGeometry) => {
+				dotGeometry.computeBoundingSphere();
+
+				if (!dotGeometry.boundingSphere) {
+					return false;
+				}
+
+				// Find the UV position of the dot on the land image.
+				const uv = spherePointToUV(
+					dotGeometry.boundingSphere.center,
+					new Vector3(),
+				);
+
+				// Sample the pixel on the land image at the given UV position.
+				const sampledPixel = sampleImage(imageData, uv);
+
+				return sampledPixel[3] !== 0;
+			},
+		});
+
+		scene.add(dotsSphereMesh);
+		scene.add(sphere);
+
+		return { scene, sphere, dotsSphereMesh };
+	};
+
+	#lookAtEarth = () => {
+		this.#camera.lookAt(this.#earth.position);
+	};
+}
diff --git a/src/components/earth/static/earth-alpha-map.png b/src/components/earth/static/earth-alpha-map.png
new file mode 100644
index 0000000..1c2040f
Binary files /dev/null and b/src/components/earth/static/earth-alpha-map.png differ
diff --git a/src/components/earth/static/earth-map.png b/src/components/earth/static/earth-map.png
new file mode 100644
index 0000000..92e6262
Binary files /dev/null and b/src/components/earth/static/earth-map.png differ
diff --git a/src/components/earth/static/map.png b/src/components/earth/static/map.png
new file mode 100644
index 0000000..e383267
Binary files /dev/null and b/src/components/earth/static/map.png differ
diff --git a/src/components/earth/static/map2.png b/src/components/earth/static/map2.png
new file mode 100644
index 0000000..b19f00f
Binary files /dev/null and b/src/components/earth/static/map2.png differ
diff --git a/src/components/earth/utils/create-dots-sphere.ts b/src/components/earth/utils/create-dots-sphere.ts
new file mode 100644
index 0000000..45c88a7
--- /dev/null
+++ b/src/components/earth/utils/create-dots-sphere.ts
@@ -0,0 +1,103 @@
+import {
+	BufferGeometry,
+	CircleGeometry,
+	DoubleSide,
+	Mesh,
+	ShaderMaterial,
+	Float32BufferAttribute,
+	Vector3,
+	type ColorRepresentation,
+	Vector2,
+} from "three";
+import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import vertexShader from "./vertex-shader.glsl?raw";
+import fragmentShader from "./fragment-shader.glsl?raw";
+
+declare namespace createDotsSphere {
+	type Props = {
+		dotSize: number;
+		dotDensity: number;
+		dotColor?: ColorRepresentation;
+		latitudeCount: number;
+		sphereRadius: number;
+		filter?: (dotGeometry: CircleGeometry) => boolean;
+		width: number;
+		height: number;
+	};
+}
+
+export function createDotsSphereMesh(
+	props: createDotsSphere.Props,
+): Mesh<BufferGeometry, ShaderMaterial> {
+	return new Mesh(
+		createDotsSphere(props),
+		new ShaderMaterial({
+			side: DoubleSide,
+			// transparent: true,
+			uniforms: {
+				u_time: { value: 0 },
+				u_drag_time: { value: 0 },
+				u_resolution: { value: new Vector2(props.width, props.height) },
+			},
+			vertexShader,
+			fragmentShader,
+		}),
+	);
+}
+
+export function createDotsSphere(
+	props: createDotsSphere.Props,
+): BufferGeometry {
+	const {
+		dotDensity,
+		dotSize,
+		latitudeCount,
+		sphereRadius,
+		filter = () => true,
+	} = props;
+	// Define an array to hold the geometries of all the dots.
+	const dotGeometries = [];
+
+	// Create a blank vector to be used by the dots.
+	const vector = new Vector3();
+
+	// Loop across the latitude lines.
+	for (let lat = 0; lat < latitudeCount; lat += 1) {
+		// Calculate the radius of the latitude line.
+		const radius =
+			Math.cos((-90 + (180 / latitudeCount) * lat) * (Math.PI / 180)) *
+			sphereRadius;
+		// Calculate the circumference of the latitude line.
+		const latitudeCircumference = radius * Math.PI * 2 * 2;
+		// Calculate the number of dots required for the latitude line.
+		const latitudeDotCount = Math.ceil(latitudeCircumference * dotDensity);
+
+		// Loop across the dot count for the latitude line.
+		for (let dot = 0; dot < latitudeDotCount; dot += 1) {
+			const dotGeometry = new CircleGeometry(dotSize, 5);
+			// Calculate the phi and theta angles for the dot.
+			const phi = (Math.PI / latitudeCount) * lat;
+			const theta = ((2 * Math.PI) / latitudeDotCount) * dot;
+
+			// const phi = Math.acos(-1 + (2 * dot) / latitudeDotCount);
+			// const theta = Math.sqrt(latitudeDotCount * Math.PI) * phi;
+
+			// Set the vector using the spherical coordinates generated from the sphere radius, phi and theta.
+			vector.setFromSphericalCoords(sphereRadius, phi, theta);
+
+			// Make sure the dot is facing in the right direction.
+			dotGeometry.lookAt(vector);
+
+			// Move the dot geometry into position.
+			dotGeometry.translate(vector.x, vector.y, vector.z);
+
+			if (!filter(dotGeometry)) continue;
+
+			// Push the positioned geometry into the array.
+			dotGeometries.push(dotGeometry);
+		}
+	}
+
+	// Merge all the dot geometries together into one buffer geometry.
+	return mergeGeometries(dotGeometries);
+}
diff --git a/src/components/earth/utils/fragment-shader.glsl b/src/components/earth/utils/fragment-shader.glsl
new file mode 100644
index 0000000..f5f8932
--- /dev/null
+++ b/src/components/earth/utils/fragment-shader.glsl
@@ -0,0 +1,27 @@
+uniform bool u_dragging;
+uniform float u_time;
+uniform float u_drag_time;
+varying float vRndId;
+varying float pct;
+
+void main() {
+    float v = sin(u_time / 200.0 * vRndId);
+    float alpha = pct * 0.7 + v * 0.2;
+    float r = 0.19;
+    float g = 0.42;
+    float b = 0.65;
+    float dragDur = 1200.0;
+
+    vec3 color = vec3(r, g, b);
+    float rInc = min(1.0, u_drag_time / dragDur) * (sin(u_drag_time / (dragDur * 0.5) + 1.0) * 0.1);
+    float gInc = min(1.0, u_drag_time / dragDur) * (sin(u_drag_time / (dragDur * 0.75) - 1.0) * 0.1);
+    float bInc = min(1.0, u_drag_time / dragDur) * (sin(u_drag_time / dragDur) * 0.1);
+
+    if (u_dragging) {
+        color.r = r + rInc;
+        color.g = g + gInc;
+        color.b = b + bInc;
+    }
+
+    gl_FragColor = vec4(color, alpha);
+}
diff --git a/src/components/earth/utils/index.ts b/src/components/earth/utils/index.ts
new file mode 100644
index 0000000..7dc1c6a
--- /dev/null
+++ b/src/components/earth/utils/index.ts
@@ -0,0 +1,2 @@
+export * from "./create-dots-sphere";
+export * from "./sphere-point-to-uv";
diff --git a/src/components/earth/utils/sphere-point-to-uv.ts b/src/components/earth/utils/sphere-point-to-uv.ts
new file mode 100644
index 0000000..4f35749
--- /dev/null
+++ b/src/components/earth/utils/sphere-point-to-uv.ts
@@ -0,0 +1,17 @@
+import { Vector2, Vector3 } from "three";
+
+export function spherePointToUV(
+	dotCenter: Vector3,
+	sphereCenter: Vector3,
+): Vector2 {
+	// Create a new vector and give it a direction from the center of the sphere
+	// to the center of the dot.
+	const newVector = new Vector3();
+	newVector.subVectors(sphereCenter, dotCenter).normalize();
+
+	// Calculate the UV coordinates of the dot and return them as a vector.
+	const uvX = 1 - (0.5 + Math.atan2(newVector.z, newVector.x) / (2 * Math.PI));
+	const uvY = 0.5 + Math.asin(newVector.y) / Math.PI;
+
+	return new Vector2(uvX, uvY);
+}
diff --git a/src/components/earth/utils/vertex-shader.glsl b/src/components/earth/utils/vertex-shader.glsl
new file mode 100644
index 0000000..3d9d031
--- /dev/null
+++ b/src/components/earth/utils/vertex-shader.glsl
@@ -0,0 +1,25 @@
+uniform float u_time;
+uniform float u_drag_time;
+uniform vec2 u_resolution;
+attribute float rndId;
+varying float vRndId;
+
+varying float pct;
+
+void main() {
+    vRndId = rndId;
+    vec2 st = position.xy/u_resolution;
+
+    pct = min(1.0, u_time / (1000. / max(0.2, 0.2 * sin(fract(rndId)))));
+
+    float vNormal = rndId + ((1.0 - rndId) * pct);
+    vNormal = rndId + ((1.0 - rndId));
+    vNormal = smoothstep(0., 1.0, vNormal);
+
+    if (u_drag_time > 0.) {
+        vNormal -= ((sin(u_time / 400.0 * vRndId) + 1.0) * 0.04) * min(1., u_drag_time / 1200.0);
+    }
+
+    vec4 modelViewPosition = modelViewMatrix * vec4(position, vNormal);
+    gl_Position = projectionMatrix * modelViewPosition;
+}
diff --git a/src/components/link.astro b/src/components/link.astro
index 55f3ee2..37a4f6a 100644
--- a/src/components/link.astro
+++ b/src/components/link.astro
@@ -1,21 +1,28 @@
 ---
-import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+interface Props extends HTMLAnchorElement {
+	class?: string;
+	roundRadius?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+}
 
 const { class: className, roundRadius, ...rest } = Astro.props;
 ---
 
 <a
 	{...rest}
-	class={clsx(
+	class={twMerge([
 		"underline",
+		"focus:ring-2",
 		roundRadius ? `rounded-${roundRadius}` : "rounded",
 		"focus:outline-none",
-		"focus:ring-2",
 		"focus:ring-blue-500",
 		"focus:ring-offset-2",
 		"transition-color",
 		"transition-shadow",
 		"hover:text-blue-700",
 		className,
-	)}><slot /></a
+	])}
 >
+	<slot />
+</a>
diff --git a/src/env.d.ts b/src/env.d.ts
index 9231795..f1283b6 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,16 @@
 /// <reference types="@astrojs/image/client" />
+
+declare module "*.png?url" {
+	const url: string;
+	export default url;
+}
+
+declare module "*.webp?url" {
+	const url: string;
+	export default url;
+}
+
+declare module "*.glsl?raw" {
+	const content: string;
+	export default content;
+}
diff --git a/src/layouts/main.astro b/src/layouts/main.astro
index 6af3cc0..d051891 100644
--- a/src/layouts/main.astro
+++ b/src/layouts/main.astro
@@ -13,7 +13,7 @@ const favicon =
 	lang="en"
 	itemtype="https://schema.org/Person"
 	itemscope
-	class="bg-slate-100"
+	class="relative bg-slate-100"
 >
 	<head>
 		<meta charset="utf-8" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 045d4fa..e63311b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,7 @@
 import { Picture } from "astro:assets";
 import me from "../static/me.jpg";
 import meLink from "../static/me.jpg?url";
+import Earth from "../components/earth/earth.astro";
 import Link from "../components/link.astro";
 import MainLayout from "../layouts/main.astro";
 ---
@@ -84,8 +85,12 @@ import MainLayout from "../layouts/main.astro";
 		</div>
 	</main>
 
+	<div class="bottom-0 m-auto h-[40vh] min-h-56 w-[80vh] overflow-hidden">
+		<Earth className="flex-none" />
+	</div>
+
 	<footer
-		class="px:4 mt-10 border-t border-blue-600 bg-slate-100 py-2 md:px-8 md:py-4"
+		class="px:4 mt-10 hidden border-t border-blue-600 bg-slate-100 py-2 md:px-8 md:py-4"
 	>
 		<div
 			class="mx-auto flex max-w-screen-lg flex-col-reverse place-items-center md:flex-row md:place-content-between"
diff --git a/src/styles/tailwind.ts b/src/styles/tailwind.ts
new file mode 100644
index 0000000..2551f3c
--- /dev/null
+++ b/src/styles/tailwind.ts
@@ -0,0 +1,4 @@
+import resolveConfig from "tailwindcss/resolveConfig";
+import tailwindConfig from "../../tailwind.config.js";
+
+const fullConfig = resolveConfig(tailwindConfig);
diff --git a/tailwind.config.js b/tailwind.config.js
index 0f47c63..b342d2f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,5 @@
 /**
- * @type {import('tailwindcss').TailwindConfig}
+ * @type {import('tailwindcss').Config}
  */
 const config = {
 	content: [
diff --git a/tsconfig.json b/tsconfig.json
index d1d1fad..d4e55cb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,6 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"extends": "astro/tsconfigs/strict",
 	"compilerOptions": {
 		"strictPropertyInitialization": false,
 		"strict": true,
@@ -15,7 +17,7 @@
 		"typeRoots": ["./node_modules/@types", "./src/types", "./src/env.d.ts"],
 		"skipLibCheck": true,
 		"noEmit": true,
-		"allowJs": true
+		"allowJs": true,
 	},
 	"include": ["src/**/*"],
 	"exclude": ["node_modules", "public", "jest"]