Anatomía

La sección tiene tres bloques apilados. En la parte superior, una cabecera centrada con un badge opcional, título y subtítulo aparece con un fade al hacer scroll. Debajo, dos contadores de estadísticas (empleados, países) se muestran uno al lado del otro. El bloque principal es un contenedor con aspect-ratio 2:1 con una grilla SVG de 9x9 líneas como fondo decorativo; cada pin de ubicación es un motion.div posicionado de forma absoluta dentro de este contenedor. Bajo el mapa, una cuadrícula responsive de tarjetas de ciudades (2 columnas en móvil, 5 en escritorio) funciona también como zona de hover que comparte estado con los pines de arriba.

Cómo funciona

Cada pin es un motion.div con una entrada spring `initial: { scale: 0 }` (stiffness 200, damping sin especificar, delay escalonado de 0.15s por pin). Dentro de cada pin, un div hermano ejecuta en bucle `animate={{ scale: [1, 2.5, 1], opacity: [0.3, 0, 0.3] }}` con `repeat: Infinity` y una duración de 2 segundos, esto crea el efecto de pulso radar. El tooltip se monta con AnimatePresence, entrando desde `y: 5, scale: 0.95` y saliendo de vuelta al mismo estado. El id del pin activo vive en un único `useState<string | null>` y se actualiza en `onMouseEnter` / `onMouseLeave` tanto del div del pin como del elemento de la cuadrícula de tarjetas, manteniendo ambos paneles sincronizados sin ninguna gestión de estado adicional.

Cómo crearlo en React

1. Definir las ubicaciones como coordenadas en porcentaje

   Dale a cada ubicación un `x` y una `y` entre 0 y 100 que representen su posición dentro del contenedor del mapa. Esto mantiene el mapa totalmente responsive, sin coordenadas fijas en píxeles. Un booleano `isHQ` te permite agrandar el pin de la sede central y añadir un icono MapPin de lucide-react.

   interface Location {
     id: string; city: string; country: string;
     description: string; x: number; y: number;
     isHQ?: boolean;
   }

2. Renderizar una grilla SVG como fondo decorativo

   Dentro del contenedor del mapa, coloca un SVG posicionado de forma absoluta con `viewBox='0 0 100 60'` y `preserveAspectRatio='none'`. Dibuja líneas verticales y horizontales a intervalos regulares usando `var(--color-border)` para el trazo, de modo que respete el preset de tema activo.

   <svg className="absolute inset-0 w-full h-full"
     viewBox="0 0 100 60" preserveAspectRatio="none">
     {Array.from({ length: 10 }, (_, i) => (
       <React.Fragment key={i}>
         <line x1={i*10+10} y1="0" x2={i*10+10} y2="60"
           stroke="var(--color-border)" strokeWidth="0.15" />
         <line x1="0" y1={i*6+6} x2="100" y2={i*6+6}
           stroke="var(--color-border)" strokeWidth="0.15" />
       </React.Fragment>
     ))}
   </svg>

3. Animar los pines con entrada spring y bucle de pulso

   Posiciona cada pin con `style={{ left: `${loc.x}%`, top: `${loc.y}%` }}` y `-translate-x-1/2 -translate-y-1/2`. Usa `whileInView` para la entrada spring y un div interno aparte con `animate={{ scale: [1, 2.5, 1] }}` y `repeat: Infinity` para el anillo de pulso. Escalona la entrada de cada pin con `delay: 0.3 + i * 0.15`.

   <motion.div
     initial={{ opacity: 0, scale: 0 }}
     whileInView={{ opacity: 1, scale: 1 }}
     transition={{ delay: 0.3 + i * 0.15, type: "spring", stiffness: 200 }}
     onMouseEnter={() => setActiveLocation(loc.id)}
     onMouseLeave={() => setActiveLocation(null)}
   >
     <motion.div
       className="absolute inset-0 rounded-full"
       animate={{ scale: [1, 2.5, 1], opacity: [0.3, 0, 0.3] }}
       transition={{ duration: 2, repeat: Infinity }}
     />
   </motion.div>

4. Sincronizar la lista de tarjetas con el estado hover del mapa

   Renderiza una cuadrícula de tarjetas de ciudades debajo del mapa. Cada tarjeta escucha `onMouseEnter` / `onMouseLeave` y escribe en el mismo estado `activeLocation`. Usa un estilo condicional sobre `borderColor` para resaltar la tarjeta activa, sin librerías adicionales, solo un ternario.

   <div style={{
     borderColor: activeLocation === loc.id
       ? "var(--color-accent)"
       : "var(--color-border)"
   }}>

Cuándo usarlo

Usa esta sección en páginas About de empresa, páginas de equipo o decks para inversores donde mostrar una presencia física en varias ciudades añade credibilidad. Funciona especialmente bien para empresas SaaS, agencias y scale-ups que quieren comunicar su alcance global sin incrustar un mapa pesado. Omítela si solo tienes una o dos ubicaciones, ahí una simple línea de dirección tiene más peso. En dispositivos táctiles los tooltips de hover no se activan; siempre se muestra debajo una lista estática de ubicaciones, de modo que la información esencial permanece accesible.

Usado por

• Stripe, Muestra sus oficinas globales con un mapa mundial interactivo en su página About para reforzar su alcance en docenas de países.
• Intercom, Usa una sección de mapa con pines de ciudades y contadores de empleados para comunicar su cultura de equipo distribuido.
• Shopify, Presenta una visualización de presencia global en su página About, combinando los pines de ubicación con estadísticas de tamaño de equipo.
• Figma, Destaca sus oficinas en Estados Unidos, Europa y Asia con un mapa interactivo como parte de la historia de la empresa.

FAQ