Globe

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/globe.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/globe.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/globe.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/globe.json

---
import "@/components/motion-kit/globe-element.ts";

const markers = [
  { location: [40.7128, -74.006], label: "New York" },
  { location: [51.5074, -0.1278], label: "London" },
  { location: [35.6762, 139.6503], label: "Tokyo" }
];

const fresnelConfig = {
  color: "#0F3161",
  rimColor: "#6FD3FF",
  rimPower: 12,
  rimIntensity: 0.95
};

const atmosphereConfig = {
  color: "#5AC8FA",
  scale: 1.22,
  power: 19.5,
  coefficient: 1.05,
  intensity: 0.72
};
---

<motion-globe
  radius={2.15}
  scale={1}
  markers={markers}
  fresnel-config={JSON.stringify(fresnelConfig)}
  atmosphere-config={JSON.stringify(atmosphereConfig)}
  point-count={21500}
  point-size={0.06}
  auto-rotate={true}
  class="w-full h-[600px]"
/>

import "@/components/motion-kit/globe-element.ts";

const markers = [
  { location: [40.7128, -74.006], label: "New York" },
  { location: [51.5074, -0.1278], label: "London" },
  { location: [35.6762, 139.6503], label: "Tokyo" }
];

const fresnelConfig = {
  color: "#0F3161",
  rimColor: "#6FD3FF",
  rimPower: 12,
  rimIntensity: 0.95
};

const atmosphereConfig = {
  color: "#5AC8FA",
  scale: 1.22,
  power: 19.5,
  coefficient: 1.05,
  intensity: 0.72
};

export default function Page() {
  return (
    <motion-globe
      radius={2.15}
      scale={1}
      markers={markers}
      fresnel-config={JSON.stringify(fresnelConfig)}
      atmosphere-config={JSON.stringify(atmosphereConfig)}
      point-count={21500}
      point-size={0.06}
      auto-rotate={true}
      className="w-full h-[600px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/globe-element.ts";

const markers = [
  { location: [40.7128, -74.006], label: "New York" },
  { location: [51.5074, -0.1278], label: "London" },
  { location: [35.6762, 139.6503], label: "Tokyo" }
];

const fresnelConfig = {
  color: "#0F3161",
  rimColor: "#6FD3FF",
  rimPower: 12,
  rimIntensity: 0.95
};

const atmosphereConfig = {
  color: "#5AC8FA",
  scale: 1.22,
  power: 19.5,
  coefficient: 1.05,
  intensity: 0.72
};
</script>

<template>
  <motion-globe
    :radius="2.15"
    :scale="1"
    :markers="markers"
    :fresnel-config="JSON.stringify(fresnelConfig)"
    :atmosphere-config="JSON.stringify(atmosphereConfig)"
    :point-count="21500"
    :point-size="0.06"
    :auto-rotate="true"
    class="w-full h-[600px]"
  />
</template>

<script>
  import "@/components/motion-kit/globe-element.ts";

  const markers = [
    { location: [40.7128, -74.006], label: "New York" },
    { location: [51.5074, -0.1278], label: "London" },
    { location: [35.6762, 139.6503], label: "Tokyo" }
  ];

  const fresnelConfig = {
    color: "#0F3161",
    rimColor: "#6FD3FF",
    rimPower: 12,
    rimIntensity: 0.95
  };

  const atmosphereConfig = {
    color: "#5AC8FA",
    scale: 1.22,
    power: 19.5,
    coefficient: 1.05,
    intensity: 0.72
  };
</script>

<motion-globe
  radius={2.15}
  scale={1}
  markers={markers}
  fresnel-config={JSON.stringify(fresnelConfig)}
  atmosphere-config={JSON.stringify(atmosphereConfig)}
  point-count={21500}
  point-size={0.06}
  auto-rotate={true}
  class="w-full h-[600px]"
/>

<script type="module" src="/components/motion-kit/globe-element.js"></script>

<motion-globe
  radius="2.15"
  scale="1"
  markers='[{"location":[40.7128,-74.006],"label":"New York"},{"location":[51.5074,-0.1278],"label":"London"},{"location":[35.6762,139.6503],"label":"Tokyo"}]'
  fresnel-config='{"color":"#0F3161","rimColor":"#6FD3FF","rimPower":12,"rimIntensity":0.95}'
  atmosphere-config='{"color":"#5AC8FA","scale":1.22,"power":19.5,"coefficient":1.05,"intensity":0.72}'
  point-count="21500"
  point-size="0.06"
  auto-rotate="true"
  class="w-full h-[600px]"
/>