reborn-ui 0.1.1

package/registry/components/vortex.json

@@ -0,0 +1,19 @@
+{
+  "name": "vortex",
+  "dependencies": [
+    "@vueuse/core",
+    "simplex-noise"
+  ],
+  "files": [
+    {
+      "path": "index.ts",
+      "content": "export { default as Vortex } from \"./Vortex.vue\";\r\n"
+    },
+    {
+      "path": "Vortex.vue",
+      "content": "<template>\r\n  <div :class=\"cn('relative h-full w-full', props.containerClass)\">\r\n    <Motion\r\n      ref=\"containerRef\"\r\n      as=\"div\"\r\n      :initial=\"{ opacity: 0 }\"\r\n      :animate=\"{ opacity: 1 }\"\r\n      class=\"absolute inset-0 z-0 flex size-full items-center justify-center bg-transparent\"\r\n    >\r\n      <canvas ref=\"canvasRef\"></canvas>\r\n    </Motion>\r\n\r\n    <div :class=\"cn('relative z-10', props.class)\">\r\n      <slot />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { createNoise3D } from \"simplex-noise\";\r\nimport { onMounted, onUnmounted } from \"vue\";\r\nimport { templateRef } from \"@vueuse/core\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useDebounceFn } from \"@vueuse/core\";\r\nconst TAU = 2 * Math.PI;\r\nconst BASE_TTL = 50;\r\nconst RANGE_TTL = 150;\r\nconst PARTICLE_PROP_COUNT = 9;\r\nconst RANGE_HUE = 100;\r\nconst NOISE_STEPS = 3;\r\nconst X_OFF = 0.00125;\r\nconst Y_OFF = 0.00125;\r\nconst Z_OFF = 0.0005;\r\n\r\ninterface VortexProps {\r\n  class?: string;\r\n  containerClass?: string;\r\n  particleCount?: number;\r\n  rangeY?: number;\r\n  baseHue?: number;\r\n  baseSpeed?: number;\r\n  rangeSpeed?: number;\r\n  baseRadius?: number;\r\n  rangeRadius?: number;\r\n  backgroundColor?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<VortexProps>(), {\r\n  particleCount: 700,\r\n  rangeY: 100,\r\n  baseSpeed: 0.0,\r\n  rangeSpeed: 1.5,\r\n  baseRadius: 1,\r\n  rangeRadius: 2,\r\n  baseHue: 220,\r\n  backgroundColor: \"#000000\",\r\n});\r\n\r\nconst tick = ref<number>(0);\r\nconst animationFrame = ref<number | null>(null);\r\nconst particleProps = shallowRef<Float32Array | null>(null);\r\nconst center = ref<[number, number]>([0, 0]);\r\nconst ctx = shallowRef<CanvasRenderingContext2D | null>(null);\r\n\r\nconst canvasRef = templateRef<HTMLCanvasElement | null>(\"canvasRef\");\r\nconst containerRef = templateRef<HTMLElement | null>(\"containerRef\");\r\n\r\nconst particleCache = {\r\n  x: 0,\r\n  y: 0,\r\n  vx: 0,\r\n  vy: 0,\r\n  life: 0,\r\n  ttl: 0,\r\n  speed: 0,\r\n  radius: 0,\r\n  hue: 0,\r\n};\r\n\r\nconst noise3D = createNoise3D();\r\n\r\nfunction rand(n: number) {\r\n  return n * Math.random();\r\n}\r\nfunction randRange(n: number): number {\r\n  return n - rand(2 * n);\r\n}\r\nfunction fadeInOut(t: number, m: number): number {\r\n  const hm = 0.5 * m;\r\n  return Math.abs(((t + hm) % m) - hm) / hm;\r\n}\r\nfunction lerp(n1: number, n2: number, speed: number): number {\r\n  return (1 - speed) * n1 + speed * n2;\r\n}\r\n\r\nfunction initParticle(i: number) {\r\n  if (!particleProps.value || !canvasRef.value) return;\r\n\r\n  const canvas = canvasRef.value;\r\n  particleCache.x = rand(canvas.width);\r\n  particleCache.y = center.value[1] + randRange(props.rangeY);\r\n  particleCache.vx = 0;\r\n  particleCache.vy = 0;\r\n  particleCache.life = 0;\r\n  particleCache.ttl = BASE_TTL + rand(RANGE_TTL);\r\n  particleCache.speed = props.baseSpeed + rand(props.rangeSpeed);\r\n  particleCache.radius = props.baseRadius + rand(props.rangeRadius);\r\n  particleCache.hue = props.baseHue + rand(RANGE_HUE);\r\n\r\n  particleProps.value.set(\r\n    [\r\n      particleCache.x,\r\n      particleCache.y,\r\n      particleCache.vx,\r\n      particleCache.vy,\r\n      particleCache.life,\r\n      particleCache.ttl,\r\n      particleCache.speed,\r\n      particleCache.radius,\r\n      particleCache.hue,\r\n    ],\r\n    i,\r\n  );\r\n}\r\n\r\nfunction updateParticle(i: number) {\r\n  if (!particleProps.value || !canvasRef.value || !ctx.value) return;\r\n\r\n  const canvas = canvasRef.value;\r\n  const props = particleProps.value;\r\n  const context = ctx.value;\r\n\r\n  particleCache.x = props[i]!;\r\n  particleCache.y = props[i + 1]!;\r\n  particleCache.vx = props[i + 2]!;\r\n  particleCache.vy = props[i + 3]!;\r\n  particleCache.life = props[i + 4]!;\r\n  particleCache.ttl = props[i + 5]!;\r\n  particleCache.speed = props[i + 6]!;\r\n  particleCache.radius = props[i + 7]!;\r\n  particleCache.hue = props[i + 8]!;\r\n\r\n  const n =\r\n    noise3D(particleCache.x * X_OFF, particleCache.y * Y_OFF, tick.value * Z_OFF) *\r\n    NOISE_STEPS *\r\n    TAU;\r\n\r\n  const nextVx = lerp(particleCache.vx, Math.cos(n), 0.5);\r\n  const nextVy = lerp(particleCache.vy, Math.sin(n), 0.5);\r\n  const nextX = particleCache.x + nextVx * particleCache.speed;\r\n  const nextY = particleCache.y + nextVy * particleCache.speed;\r\n\r\n  context.save();\r\n  context.lineCap = \"round\";\r\n  context.lineWidth = particleCache.radius;\r\n  context.strokeStyle = `hsla(${particleCache.hue},100%,60%,${fadeInOut(\r\n    particleCache.life,\r\n    particleCache.ttl,\r\n  )})`;\r\n  context.beginPath();\r\n  context.moveTo(particleCache.x, particleCache.y);\r\n  context.lineTo(nextX, nextY);\r\n  context.stroke();\r\n  context.restore();\r\n\r\n  props[i] = nextX;\r\n  props[i + 1] = nextY;\r\n  props[i + 2] = nextVx;\r\n  props[i + 3] = nextVy;\r\n  props[i + 4] = particleCache.life + 1;\r\n\r\n  if (\r\n    nextX > canvas.width ||\r\n    nextX < 0 ||\r\n    nextY > canvas.height ||\r\n    nextY < 0 ||\r\n    particleCache.life > particleCache.ttl\r\n  ) {\r\n    initParticle(i);\r\n  }\r\n}\r\n\r\nfunction draw() {\r\n  if (!canvasRef.value || !ctx.value || !particleProps.value) return;\r\n\r\n  const canvas = canvasRef.value;\r\n  const context = ctx.value;\r\n\r\n  tick.value++;\r\n\r\n  context.fillStyle = props.backgroundColor;\r\n  context.fillRect(0, 0, canvas.width, canvas.height);\r\n\r\n  for (let i = 0; i < particleProps.value.length; i += PARTICLE_PROP_COUNT) {\r\n    updateParticle(i);\r\n  }\r\n\r\n  context.save();\r\n  context.filter = \"blur(8px) brightness(200%)\";\r\n  context.globalCompositeOperation = \"lighter\";\r\n  context.drawImage(canvas, 0, 0);\r\n  context.restore();\r\n\r\n  context.save();\r\n  context.filter = \"blur(4px) brightness(200%)\";\r\n  context.globalCompositeOperation = \"lighter\";\r\n  context.drawImage(canvas, 0, 0);\r\n  context.restore();\r\n\r\n  animationFrame.value = requestAnimationFrame(draw);\r\n}\r\n\r\nconst handleResize = useDebounceFn(() => {\r\n  if (!canvasRef.value) return;\r\n\r\n  const canvas = canvasRef.value;\r\n  const { innerWidth, innerHeight } = window;\r\n  canvas.width = innerWidth;\r\n  canvas.height = innerHeight;\r\n  center.value = [0.5 * canvas.width, 0.5 * canvas.height];\r\n}, 150);\r\n\r\nonMounted(() => {\r\n  const canvas = canvasRef.value;\r\n  if (!canvas) return;\r\n\r\n  ctx.value = canvas.getContext(\"2d\");\r\n  if (!ctx.value) return;\r\n\r\n  canvas.width = window.innerWidth;\r\n  canvas.height = window.innerHeight;\r\n  center.value = [0.5 * canvas.width, 0.5 * canvas.height];\r\n\r\n  const particlePropsLength = props.particleCount * PARTICLE_PROP_COUNT;\r\n  particleProps.value = new Float32Array(particlePropsLength);\r\n\r\n  for (let i = 0; i < particlePropsLength; i += PARTICLE_PROP_COUNT) {\r\n    initParticle(i);\r\n  }\r\n\r\n  draw();\r\n  window.addEventListener(\"resize\", handleResize);\r\n});\r\n\r\nonUnmounted(() => {\r\n  if (animationFrame.value) {\r\n    cancelAnimationFrame(animationFrame.value);\r\n  }\r\n  window.removeEventListener(\"resize\", handleResize);\r\n\r\n  ctx.value = null;\r\n  particleProps.value = null;\r\n});\r\n</script>\r\n"
+    }
+  ],
+  "fileCount": 2,
+  "contentHash": "40445118f1e48cd2e7ec86fdf7b027569c366cc6"
+}

package/registry/components/warp-background.json

@@ -0,0 +1,22 @@
+{
+  "name": "warp-background",
+  "dependencies": [
+    "motion-v"
+  ],
+  "files": [
+    {
+      "path": "Beam.vue",
+      "content": "<template>\r\n  <Motion\r\n    :style=\"{\r\n      '--x': `${props.x}`,\r\n      '--width': `${props.width}`,\r\n      '--aspect-ratio': `${ar}`,\r\n      '--background': `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\r\n    }\"\r\n    class=\"absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]\"\r\n    :initial=\"{\r\n      x: '-50%',\r\n      y: '100cqmax',\r\n    }\"\r\n    :animate=\"{\r\n      x: '-50%',\r\n      y: '-100%',\r\n    }\"\r\n    :transition=\"{\r\n      duration: props.duration,\r\n      delay: props.delay,\r\n      repeat: Infinity,\r\n      ease: 'linear',\r\n    }\"\r\n  ></Motion>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { Motion } from \"motion-v\";\r\nimport { computed } from \"vue\";\r\n\r\ninterface Props {\r\n  width: string | number;\r\n  x: string | number;\r\n  delay: number;\r\n  duration: number;\r\n}\r\nconst props = defineProps<Props>();\r\n\r\nconst hue = computed(() => Math.floor(Math.random() * 360));\r\nconst ar = computed(() => Math.floor(Math.random() * 10) + 1);\r\n</script>\r\n\r\n<style></style>\r\n"
+    },
+    {
+      "path": "index.ts",
+      "content": "export { default as Beam } from \"./Beam.vue\";\r\nexport { default as WarpBackground } from \"./WarpBackground.vue\";\r\n"
+    },
+    {
+      "path": "WarpBackground.vue",
+      "content": "<template>\r\n  <div :class=\"cn('relative rounded border md:p-20', props.class)\">\r\n    <div\r\n      :style=\"{\r\n        '--perspective': `${props.perspective}px`,\r\n        '--grid-color': props.gridColor,\r\n        '--beam-size': `${props.beamSize}%`,\r\n      }\"\r\n      class=\"pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clip-path:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]\"\r\n    >\r\n      <!-- TOP -->\r\n      <div\r\n        class=\"absolute [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform-style:preserve-3d] [transform:rotateX(-90deg)] [width:100cqi]\"\r\n      >\r\n        <Beam\r\n          v-for=\"(beam, index) in topBeams\"\r\n          :key=\"`top-${index}`\"\r\n          :width=\"`${props.beamSize}%`\"\r\n          :x=\"`${beam.x * props.beamSize}%`\"\r\n          :delay=\"beam.delay\"\r\n          :duration=\"beamDuration\"\r\n        />\r\n      </div>\r\n      <!-- BOTTOM -->\r\n      <div\r\n        class=\"absolute top-full [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform-style:preserve-3d] [transform:rotateX(-90deg)] [width:100cqi]\"\r\n      >\r\n        <Beam\r\n          v-for=\"(beam, index) in bottomBeams\"\r\n          :key=\"`bottom-${index}`\"\r\n          :width=\"`${props.beamSize}%`\"\r\n          :x=\"`${beam.x * props.beamSize}%`\"\r\n          :delay=\"beam.delay\"\r\n          :duration=\"beamDuration\"\r\n        />\r\n      </div>\r\n      <!-- LEFT -->\r\n      <div\r\n        class=\"absolute left-0 top-0 [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform-style:preserve-3d] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]\"\r\n      >\r\n        <Beam\r\n          v-for=\"(beam, index) in leftBeams\"\r\n          :key=\"`left-${index}`\"\r\n          :width=\"`${props.beamSize}%`\"\r\n          :x=\"`${beam.x * props.beamSize}%`\"\r\n          :delay=\"beam.delay\"\r\n          :duration=\"beamDuration\"\r\n        />\r\n      </div>\r\n      <!-- RIGHT -->\r\n      <div\r\n        class=\"absolute right-0 top-0 [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:100%_0%] [transform-style:preserve-3d] [transform:rotate(-90deg)_rotateX(-90deg)] [width:100cqh]\"\r\n      >\r\n        <Beam\r\n          v-for=\"(beam, index) in rightBeams\"\r\n          :key=\"`right-${index}`\"\r\n          :width=\"`${props.beamSize}%`\"\r\n          :x=\"`${beam.x * props.beamSize}%`\"\r\n          :delay=\"beam.delay\"\r\n          :duration=\"beamDuration\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"relative\">\r\n      <slot />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { cn } from \"@/lib/utils\";\r\nimport Beam from \"./Beam.vue\";\r\nimport { computed } from \"vue\";\r\n\r\ninterface Props {\r\n  perspective?: number;\r\n  beamsPerSide?: number;\r\n  beamSize?: number;\r\n  beamDelayMax?: number;\r\n  beamDelayMin?: number;\r\n  beamDuration?: number;\r\n  gridColor?: string;\r\n  class?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  perspective: 100,\r\n  beamsPerSide: 3,\r\n  beamSize: 5,\r\n  beamDelayMax: 3,\r\n  beamDelayMin: 0,\r\n  beamDuration: 3,\r\n  gridColor: \"hsl(var(--border))\",\r\n});\r\n\r\nconst beamDuration = computed(() => props.beamDuration);\r\nconst beamDelayMax = computed(() => props.beamDelayMax);\r\nconst beamDelayMin = computed(() => props.beamDelayMin);\r\n\r\nfunction generateBeams() {\r\n  const beams = [];\r\n  const cellsPerSide = Math.floor(100 / props.beamSize);\r\n  const step = cellsPerSide / props.beamsPerSide;\r\n\r\n  for (let i = 0; i < props.beamsPerSide; i++) {\r\n    const x = Math.floor(i * step);\r\n    const delay = Math.random() * (beamDelayMax.value - beamDelayMin.value) + beamDelayMin.value;\r\n    beams.push({ x, delay });\r\n  }\r\n  return beams;\r\n}\r\n\r\n// generateBeams\r\nconst topBeams = generateBeams();\r\nconst bottomBeams = generateBeams();\r\nconst leftBeams = generateBeams();\r\nconst rightBeams = generateBeams();\r\n</script>\r\n"
+    }
+  ],
+  "fileCount": 3,
+  "contentHash": "16663d6cf5a3e121564195137a3bd82145af6b11"
+}

package/registry/components/wavy-background.json

@@ -0,0 +1,19 @@
+{
+  "name": "wavy-background",
+  "dependencies": [
+    "@vueuse/core",
+    "simplex-noise"
+  ],
+  "files": [
+    {
+      "path": "index.ts",
+      "content": "export { default as WavyBackground } from \"./WavyBackground.vue\";\r\n"
+    },
+    {
+      "path": "WavyBackground.vue",
+      "content": "<template>\r\n  <div :class=\"cn('h-screen flex flex-col items-center justify-center', props.containerClass)\">\r\n    <canvas\r\n      id=\"canvas\"\r\n      ref=\"canvasRef\"\r\n      class=\"absolute z-0\"\r\n      :style=\"{ filter: isSafari ? `blur(${props.blur}px)` : undefined }\"\r\n    ></canvas>\r\n    <div :class=\"cn('relative z-10', props.class)\">\r\n      <slot />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { createNoise3D } from \"simplex-noise\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ref, onMounted, onBeforeUnmount } from \"vue\";\r\nimport { templateRef } from \"@vueuse/core\";\r\n\r\ninterface WavyBackgroundProps {\r\n  class?: string;\r\n  containerClass?: string;\r\n  colors?: string[];\r\n  waveWidth?: number;\r\n  backgroundFill?: string;\r\n  blur?: number;\r\n  speed?: \"slow\" | \"fast\";\r\n  waveOpacity?: number;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  [key: string]: any;\r\n}\r\n\r\nconst props = withDefaults(defineProps<WavyBackgroundProps>(), {\r\n  colors: () => [\"#38bdf8\", \"#818cf8\", \"#c084fc\", \"#e879f9\", \"#22d3ee\"],\r\n  waveWidth: 50,\r\n  backgroundFill: \"black\",\r\n  blur: 10,\r\n  speed: \"fast\",\r\n  waveOpacity: 0.5,\r\n});\r\n\r\nconst noise = createNoise3D();\r\n\r\n// Declare variables with null\r\nlet w: number,\r\n  h: number,\r\n  nt = 0,\r\n  ctx: CanvasRenderingContext2D | null = null;\r\nlet animationId: number;\r\n\r\nconst canvasRef = templateRef<HTMLCanvasElement | null>(\"canvasRef\");\r\n\r\nfunction getSpeed(): number {\r\n  return props.speed === \"slow\" ? 0.001 : 0.002;\r\n}\r\n\r\nfunction init() {\r\n  const canvas = canvasRef.value;\r\n  if (canvas) {\r\n    ctx = canvas.getContext(\"2d\");\r\n    if (ctx) {\r\n      const parent = canvasRef.value.parentElement;\r\n      if (parent) {\r\n        w = ctx.canvas.width = parent.clientWidth;\r\n        h = ctx.canvas.height = parent.clientHeight;\r\n      }\r\n\r\n      ctx.filter = `blur(${props.blur}px)`;\r\n      window.onresize = () => {\r\n        if (parent) {\r\n          w = ctx!.canvas.width = parent.clientWidth;\r\n          h = ctx!.canvas.height = parent.clientHeight;\r\n        }\r\n        ctx!.filter = `blur(${props.blur}px)`;\r\n      };\r\n      render();\r\n    }\r\n  }\r\n}\r\n\r\nfunction drawWave(n: number) {\r\n  nt += getSpeed();\r\n  for (let i = 0; i < n; i++) {\r\n    ctx!.beginPath();\r\n    ctx!.lineWidth = props.waveWidth!;\r\n    ctx!.strokeStyle = props.colors[i % props.colors!.length];\r\n    for (let x = 0; x < w; x += 5) {\r\n      const y = noise(x / 800, 0.3 * i, nt) * 100;\r\n      ctx!.lineTo(x, y + h * 0.5); // Adjust for height, at 50% of the container\r\n    }\r\n    ctx!.stroke();\r\n    ctx!.closePath();\r\n  }\r\n}\r\n\r\nfunction render() {\r\n  if (ctx) {\r\n    ctx.fillStyle = props.backgroundFill!;\r\n    ctx.globalAlpha = props.waveOpacity!;\r\n    ctx.fillRect(0, 0, w, h);\r\n    drawWave(5);\r\n    animationId = requestAnimationFrame(render);\r\n  }\r\n}\r\n\r\nonBeforeUnmount(() => {\r\n  cancelAnimationFrame(animationId);\r\n});\r\n\r\nconst isSafari = ref(false);\r\nonMounted(() => {\r\n  isSafari.value =\r\n    typeof window !== \"undefined\" &&\r\n    navigator.userAgent.includes(\"Safari\") &&\r\n    !navigator.userAgent.includes(\"Chrome\");\r\n\r\n  init();\r\n});\r\n</script>\r\n"
+    }
+  ],
+  "fileCount": 2,
+  "contentHash": "229d1e1599b1b63c68d201e37569a02aef39fb70"
+}

package/registry/components/world-map.json

@@ -0,0 +1,19 @@
+{
+  "name": "world-map",
+  "dependencies": [
+    "dotted-map",
+    "motion-v"
+  ],
+  "files": [
+    {
+      "path": "index.ts",
+      "content": "export { default as WorldMap } from \"./WorldMap.vue\";\r\n"
+    },
+    {
+      "path": "WorldMap.vue",
+      "content": "<template>\r\n  <div class=\"relative aspect-[2/1] w-full rounded-lg bg-white font-sans dark:bg-black\">\r\n    <NuxtImg\r\n      :src=\"`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`\"\r\n      class=\"pointer-events-none size-full select-none [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)]\"\r\n      alt=\"world map\"\r\n      height=\"495\"\r\n      width=\"1056\"\r\n      :draggable=\"false\"\r\n    />\r\n    <svg\r\n      ref=\"svgRef\"\r\n      view-box=\"0 0 800 400\"\r\n      class=\"pointer-events-none absolute inset-0 size-full select-none\"\r\n    >\r\n      <g\r\n        v-for=\"(dot, i) in props.dots\"\r\n        :key=\"`path-group-${i}`\"\r\n      >\r\n        <Motion\r\n          :key=\"`start-upper-${i}`\"\r\n          as=\"path\"\r\n          :d=\"createCurvedPath(dot)\"\r\n          fill=\"none\"\r\n          stroke=\"url(#path-gradient)\"\r\n          stroke-width=\"1\"\r\n          :initial=\"{\r\n            pathLength: 0,\r\n          }\"\r\n          :animate=\"{\r\n            pathLength: 1,\r\n          }\"\r\n          :transition=\"{\r\n            duration: 1,\r\n            delay: 0.5 * i,\r\n            ease: 'easeOut',\r\n          }\"\r\n        ></Motion>\r\n      </g>\r\n\r\n      <defs>\r\n        <linearGradient\r\n          id=\"path-gradient\"\r\n          x1=\"0%\"\r\n          y1=\"0%\"\r\n          x2=\"100%\"\r\n          y2=\"0%\"\r\n        >\r\n          <stop\r\n            offset=\"0%\"\r\n            stop-color=\"white\"\r\n            stop-opacity=\"0\"\r\n          />\r\n          <stop\r\n            offset=\"5%\"\r\n            :stop-color=\"lineColor\"\r\n            stop-opacity=\"1\"\r\n          />\r\n          <stop\r\n            offset=\"95%\"\r\n            :stop-color=\"lineColor\"\r\n            stop-opacity=\"1\"\r\n          />\r\n          <stop\r\n            offset=\"100%\"\r\n            stop-color=\"white\"\r\n            stop-opacity=\"0\"\r\n          />\r\n        </linearGradient>\r\n      </defs>\r\n\r\n      <g\r\n        v-for=\"(dot, i) in props.dots\"\r\n        :key=\"`points-group-${i}`\"\r\n      >\r\n        <g :key=\"`start-${i}`\">\r\n          <circle\r\n            :cx=\"projectPoint(dot.start.lat, dot.start.lng).x\"\r\n            :cy=\"projectPoint(dot.start.lat, dot.start.lng).y\"\r\n            r=\"2\"\r\n            :fill=\"props.lineColor\"\r\n          />\r\n          <circle\r\n            :cx=\"projectPoint(dot.start.lat, dot.start.lng).x\"\r\n            :cy=\"projectPoint(dot.start.lat, dot.start.lng).y\"\r\n            r=\"2\"\r\n            :fill=\"props.lineColor\"\r\n            opacity=\"0.5\"\r\n          >\r\n            <animate\r\n              attribute-name=\"r\"\r\n              from=\"2\"\r\n              to=\"8\"\r\n              dur=\"1.5s\"\r\n              begin=\"0s\"\r\n              repeat-count=\"indefinite\"\r\n            />\r\n            <animate\r\n              attribute-name=\"opacity\"\r\n              from=\"0.5\"\r\n              to=\"0\"\r\n              dur=\"1.5s\"\r\n              begin=\"0s\"\r\n              repeat-count=\"indefinite\"\r\n            />\r\n          </circle>\r\n        </g>\r\n        <g :key=\"`end-${i}`\">\r\n          <circle\r\n            :cx=\"projectPoint(dot.end.lat, dot.end.lng).x\"\r\n            :cy=\"projectPoint(dot.end.lat, dot.end.lng).y\"\r\n            r=\"2\"\r\n            :fill=\"props.lineColor\"\r\n          />\r\n          <circle\r\n            :cx=\"projectPoint(dot.end.lat, dot.end.lng).x\"\r\n            :cy=\"projectPoint(dot.end.lat, dot.end.lng).y\"\r\n            r=\"2\"\r\n            :fill=\"props.lineColor\"\r\n            opacity=\"0.5\"\r\n          >\r\n            <animate\r\n              attribute-name=\"r\"\r\n              from=\"2\"\r\n              to=\"8\"\r\n              dur=\"1.5s\"\r\n              begin=\"0s\"\r\n              repeat-count=\"indefinite\"\r\n            />\r\n            <animate\r\n              attribute-name=\"opacity\"\r\n              from=\"0.5\"\r\n              to=\"0\"\r\n              dur=\"1.5s\"\r\n              begin=\"0s\"\r\n              repeat-count=\"indefinite\"\r\n            />\r\n          </circle>\r\n        </g>\r\n      </g>\r\n    </svg>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport DottedMap from \"dotted-map\";\r\nimport { Motion } from \"motion-v\";\r\n\r\ninterface Dot {\r\n  start: { lat: number; lng: number; label?: string };\r\n  end: { lat: number; lng: number; label?: string };\r\n}\r\ninterface Props {\r\n  dots?: Array<Dot>;\r\n  class?: string;\r\n  lineColor?: string;\r\n  mapColor: string;\r\n  mapBgColor: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  dots: () => [],\r\n  lineColor: \"#0EA5E9\",\r\n});\r\n\r\nconst map = new DottedMap({ height: 100, grid: \"diagonal\" });\r\n\r\nconst svgMap = computed(() =>\r\n  map.getSVG({\r\n    radius: 0.22,\r\n    color: props.mapColor,\r\n    shape: \"circle\",\r\n    backgroundColor: props.mapBgColor,\r\n  }),\r\n);\r\n\r\nfunction projectPoint(lat: number, lng: number) {\r\n  const x = (lng + 180) * (800 / 360);\r\n  const y = (90 - lat) * (400 / 180);\r\n  return { x, y };\r\n}\r\n\r\nfunction createCurvedPath(dot: Dot) {\r\n  const start = projectPoint(dot.start.lat, dot.start.lng);\r\n  const end = projectPoint(dot.end.lat, dot.end.lng);\r\n  const midX = (start.x + end.x) / 2;\r\n  const midY = Math.min(start.y, end.y) - 50;\r\n  return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;\r\n}\r\n</script>\r\n"
+    }
+  ],
+  "fileCount": 2,
+  "contentHash": "a4ed6d5eb3ba61dd368b61696f43fb5c878a56d6"
+}