Regions map

package.json

@@ -48,9 +48,11 @@
         "@typescript-eslint/eslint-plugin": "^7.13.1",
         "@typescript-eslint/parser": "^7.13.1",
         "clsx": "^2.1.1",
+        "cobe": "^0.6.3",
         "cva": "npm:class-variance-authority@^0.7.0",
         "date-fns": "^3.6.0",
         "dequal": "^2.0.3",
+        "dotted-map": "^2.2.3",
         "embla-carousel": "^8.1.5",
         "embla-carousel-svelte": "^8.1.5",
         "embla-carousel-wheel-gestures": "^8.0.1",

src/app.css

@@ -70,6 +70,7 @@
 
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-fade-in: fade-in 500ms ease-out forwards;
 
     /* Pink polyfills */
     --transition: 0.2s;
@@ -84,6 +85,15 @@
         }
     }
 
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
     /* Fonts */
     --font-family-sans: 'Inter', arial, sans-serif;
     --font-family-mono: 'Fira Code', monospace;

src/routes/globe/(components)/Globe.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import createGlobe from 'cobe';
+
+    let canvas: HTMLCanvasElement;
+    let phi = 0;
+
+    onMount(() => {
+        let width = 0;
+        const onResize = () => canvas && (width = canvas.offsetWidth);
+        window.addEventListener('resize', onResize);
+        onResize();
+        const globe = createGlobe(canvas, {
+            devicePixelRatio: 2,
+            width: width * 2,
+            height: width * 2 * 0.4,
+            phi: 0,
+            theta: 0.3,
+            dark: 1,
+            diffuse: 3,
+            mapSamples: 16000,
+            mapBrightness: 6,
+            baseColor: [255 / 30, 255 / 30, 255 / 30],
+            markerColor: [1, 1, 1],
+            glowColor: [1.2, 1.2, 1.2],
+            markers: [
+                { location: [50.1109, 8.6821], size: 0.03 },
+                { location: [48.8575, 2.3514], size: 0.03 },
+                { location: [12.971599, 77.5946], size: 0.03 },
+                { location: [1.3521, 103.8198], size: 0.03 },
+                { location: [33.8688, 151.2093], size: 0.03 },
+                { location: [40.7128, -73.935242], size: 0.03 },
+                { location: [37.7749, -122.4194], size: 0.03 }
+            ],
+            scale: 2.5,
+            offset: [0, width * 2 * 0.4 * 0.6],
+            onRender: (state) => {
+                state.width = width * 2;
+                state.height = width * 2 * 0.5;
+                state.phi = phi;
+                phi += 0.004;
+            }
+        });
+        setTimeout(() => (canvas.style.opacity = '1'));
+        return () => {
+            globe.destroy();
+            window.removeEventListener('resize', onResize);
+        };
+    });
+</script>
+
+<div class="bg-white">
+    <div
+        class="container relative mx-auto flex items-center justify-center perspective-distant transform-3d"
+    >
+        <canvas bind:this={canvas} class="h-[650px] w-screen" />
+    </div>
+</div>