"use client"; import { useMemo } from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; interface Dot { x: number; y: number; r: number; opacity: number; } function seeded(i: number, salt: number) { return Math.abs(Math.sin(i * 999 + salt * 137.13)); } function buildGlobeDots(rings = 14, perRing = 22): Dot[] { const dots: Dot[] = []; const cx = 200; const cy = 200; const radius = 170; for (let ring = 0; ring < rings; ring++) { const phi = (Math.PI * (ring + 0.5)) / rings; // 0..PI const ringRadius = Math.sin(phi) * radius; const y = cy - Math.cos(phi) * radius; const count = Math.max(6, Math.round(perRing * Math.sin(phi))); for (let j = 0; j < count; j++) { const theta = (2 * Math.PI * j) / count; const x = cx + Math.cos(theta) * ringRadius; const depth = Math.sin(theta); // -1 front .. 1 back-ish (visual only) // round to 2dp so server/client float serialization matches (hydration) dots.push({ x: Math.round(x * 100) / 100, y: Math.round(y * 100) / 100, r: Math.round((1.1 + 0.6 * seeded(ring * 31 + j, 1)) * 100) / 100, opacity: Math.round((0.25 + 0.55 * ((depth + 1) / 2)) * 1000) / 1000, }); } } return dots; } const ARCS = [ { from: [90, 140], to: [280, 110], delay: 0 }, { from: [140, 300], to: [260, 260], delay: 0.6 }, { from: [70, 220], to: [200, 90], delay: 1.2 }, ]; export function GlobeDots({ className }: { className?: string }) { const dots = useMemo(() => buildGlobeDots(), []); return (

{dots.map((d, i) => ( ))} {ARCS.map((arc, i) => ( ))}

); } export default function Demo() { return (

); }

Globe Dots