Regions map

package.json

@@ -49,6 +49,7 @@
         "@typescript-eslint/parser": "^7.13.1",
         "analytics": "^0.8.14",
         "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",

src/app.css

@@ -77,8 +77,11 @@
 
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-fade-in: fade-in 500ms ease-out forwards;
     --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
         up 0.75s ease-in-out both;
+    --animate-map: map 0.75s ease-in-out both;
+    --animate-marker: marker 1.5s ease-in-out both infinite;
 
     /* Pink polyfills */
     --transition: 0.2s;
@@ -120,6 +123,28 @@
         }
     }
 
+    @keyframes map {
+        0% {
+            opacity: 0;
+            transform: scale(0.98);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes marker {
+        0% {
+            opacity: 0.75;
+            r: var(--radius);
+        }
+        100% {
+            opacity: 0;
+            r: calc(var(--radius) * 2);
+        }
+    }
+
     /* Fonts */
     --font-family-sans: 'Inter', arial, sans-serif;
     --font-family-mono: 'Fira Code', monospace;

src/lib/components/regions/Globe.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import createGlobe from 'cobe';
+
+    let phi = 0;
+    let width = 0;
+
+    const globe = (canvas: HTMLCanvasElement) => {
+        const onResize = () => (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, 0.5, 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 {
+            destroy() {
+                window.removeEventListener('resize', onResize);
+                globe.destroy();
+            }
+        };
+    };
+</script>
+
+<div class="bg-white">
+    <div
+        class="container relative mx-auto flex items-center justify-center perspective-distant transform-3d"
+    >
+        <canvas use:globe class="h-[650px] w-screen" />
+    </div>
+</div>

src/markdoc/tags/Regions_Map.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Map from '$lib/components/regions/Map.svelte';
+</script>
+
+<Map />

src/markdoc/tags/_Module.svelte

@@ -19,4 +19,5 @@
     export { default as Accordion_Item } from './Accordion_Item.svelte';
     export { default as Youtube } from './Youtube.svelte';
     export { default as Call_To_Action } from './Call_To_Action.svelte';
+    export { default as Regions_Map } from './Regions_Map.svelte';
 </script>

src/routes/maps/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import Map from '$lib/components/regions/Map.svelte';
+    import Main from '$lib/layouts/Main.svelte';
+</script>
+
+<Main>
+    <Map />
+</Main>

src/routes/maps/+page.ts

@@ -0,0 +1 @@
+export const ssr = false;