From 12ae1a9175dc317ad64d532cc3bb425171772732 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 9 Mar 2026 16:02:47 +0100
Subject: [PATCH] Zoom in Globe and slow drag speed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Position globe lower with overflow-hidden for cropped zoomed look
- Globe at 140% width pushed down 30% so only top portion visible
- Add radial gradient overlay at bottom for depth
- Increase movement damping 1400→3000 for slower drag
---
 components/dashboard/Globe.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/Globe.tsx b/components/dashboard/Globe.tsx
index e9bf0b7..acebe47 100644
--- a/components/dashboard/Globe.tsx
+++ b/components/dashboard/Globe.tsx
@@ -6,7 +6,7 @@ import { useMotionValue, useSpring } from 'framer-motion'
 import { useTheme } from '@ciphera-net/ui'
 import { countryCentroids } from '@/lib/country-centroids'
 
-const MOVEMENT_DAMPING = 1400
+const MOVEMENT_DAMPING = 3000
 
 interface GlobeProps {
   data: Array<{ country: string; pageviews: number }>
@@ -109,8 +109,8 @@ export default function Globe({ data, className }: GlobeProps) {
   }, [rs, markers, isDark])
 
   return (
-    <div className={`relative w-full h-full flex items-center justify-center ${className ?? ''}`}>
-      <div className="relative aspect-square w-full max-w-[320px]">
+    <div className={`relative w-full h-full overflow-hidden ${className ?? ''}`}>
+      <div className="absolute inset-x-0 top-[30%] mx-auto aspect-square w-[140%] max-w-none">
         <canvas
           className="size-full opacity-0 transition-opacity duration-500"
           style={{ contain: 'layout paint size' }}
@@ -127,6 +127,7 @@ export default function Globe({ data, className }: GlobeProps) {
           }
         />
       </div>
+      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
     </div>
   )
 }