Globe

pnpm dlx motion-blocks add globe

npx motion-blocks add globe

bunx --bun motion-blocks add globe

yarn dlx motion-blocks add globe

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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]"/>