Chart: wrap chartData (Date formatting on every data point) and
metricsWithTrends in useMemo — these ran on every render.
Globe: memoize marker computation (Math.max + filter + map on every render).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove useMotionValue/useSpring which caused effect re-runs
and globe destroy/recreate cycles (source of glitches)
- All state tracked via refs (phi, drag offset, pointer position)
- Effect only re-runs on theme change, not on every spring tick
- Direct delta tracking for drag instead of spring physics
- Simpler, more stable WebGL lifecycle
- Set canvas size once on mount instead of every render frame
- Use actual devicePixelRatio (capped at 2) instead of hardcoded 2
- Remove redundant width*2 doubling (was 4x with devicePixelRatio:2)
- Increase spring damping 50→60, reduce stiffness 80→60 for smoother drag
- 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
- Magic UI Globe component with auto-rotation and drag interaction
- Dark/light mode reactive (base color, glow, brightness)
- Country markers from visitor data using existing centroids
- Brand orange (#FD5E0F) marker color matching DottedMap
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
