map

1"use client"
2 
3import { motion } from "motion/react"
4 
5function Marker({
6  src,
7  top,
8  offset,
9  delay,
10}: {
11  src: string
12  top: number
13  offset: number
14  delay: number
15}) {
16  return (
17    <motion.div
18      variants={{
19        idle: { scale: 0, opacity: 0, rotateX: 0, rotate: 0, y: 0 },
20        active: { y: [-20, 0, 4, 0], scale: [0.75, 1], opacity: [0, 1] },
21      }}
22      transition={{ duration: 0.25, delay, ease: "easeOut" }}
23      style={{ "--offset": `${offset}px`, top } as React.CSSProperties}
24      className="absolute left-[calc(50%+var(--offset))] size-[38px] drop-shadow-[0_3px_1px_rgba(0,0,0,.15)]"
25    >
26      <svg fill="none" viewBox="0 0 38 38" className="absolute size-full">
27        <path
28          d="M29.607 5.193c5.858 5.857 5.858 15.355 0 21.213l-9.9 9.9-.707.706-.708-.708-9.899-9.898c-5.857-5.858-5.857-15.356 0-21.213 5.858-5.858 15.356-5.858 21.214 0Z"
29          className="fill-black/5"
30        />
31        <path
32          d="m28.9 25.698-9.9 9.9-9.9-9.9C3.634 20.232 3.634 11.367 9.1 5.9 14.569.432 23.433.432 28.9 5.9c5.467 5.468 5.467 14.332 0 19.8Z"
33          className="fill-white"
34        />
35      </svg>
36      <img
37        alt=""
38        src={src}
39        className="absolute top-[4px] left-[7px] size-6 rounded-full"
40      />
41    </motion.div>
42  )
43}
44 
45export function Map() {
46  return (
47    <motion.div
48      initial="idle"
49      whileHover="active"
50      variants={{ idle: {}, active: {} }}
51      aria-hidden="true"
52      className="relative size-full"
53    >
54      <div className="absolute inset-0 bg-[url(https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/map.png)] mask-[linear-gradient(to_bottom,black_50%,transparent)] bg-size-[530px_430px] bg-position-[center_-75px] bg-no-repeat dark:mask-[linear-gradient(to_bottom,black_50%,transparent)]" />
55      <div className="absolute inset-0">
56        <Marker
57          src="https://avatar.vercel.sh/karthik"
58          top={96}
59          offset={-128}
60          delay={0.15}
61        />
62        <Marker
63          src="https://avatar.vercel.sh/varma"
64          top={160}
65          offset={-16}
66          delay={0.4}
67        />
68        <Marker
69          src="https://avatar.vercel.sh/pawan"
70          top={144}
71          offset={96}
72          delay={0.3}
73        />
74        <Marker
75          src="https://avatar.vercel.sh/mark"
76          top={192}
77          offset={64}
78          delay={0.6}
79        />
80        <Marker
81          src="https://avatar.vercel.sh/jeff"
82          top={224}
83          offset={-32}
84// … truncated