{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "globe",
  "type": "registry:ui",
  "description": "COBE-powered 3D globe with showcase presets, markers, arcs, DOM overlays, and theme-aware styling",
  "dependencies": [
    "cobe",
    "motion",
    "next-themes"
  ],
  "files": [
    {
      "path": "registry/default/ui/globe.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport createGlobe from \"cobe\"\nimport {\n  motion,\n  useInView,\n  useReducedMotion,\n  type Variants,\n} from \"motion/react\"\nimport { useTheme } from \"next-themes\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DEFAULT_KEY = \"default\" as const\n\n// Shared showcase data for globe demos (cobe library)\n\nexport type ShowcaseConfig = {\n  theta: number\n  dark: number\n  mapBrightness: number\n  markerColor: [number, number, number]\n  baseColor: [number, number, number]\n  arcColor: [number, number, number]\n  markerSize: number\n  markerElevation: number\n}\n\n// Showcase: Default (matches hero globe exactly)\nexport const showcaseDefaultMarkers = [\n  {\n    id: \"default-sf\",\n    location: [37.7595, -122.4367] as [number, number],\n    label: \"San Francisco\",\n  },\n  {\n    id: \"default-nyc\",\n    location: [40.7128, -74.006] as [number, number],\n    label: \"New York\",\n  },\n  {\n    id: \"default-tokyo\",\n    location: [35.6762, 139.6503] as [number, number],\n    label: \"Tokyo\",\n  },\n  {\n    id: \"default-london\",\n    location: [51.5074, -0.1278] as [number, number],\n    label: \"London\",\n  },\n  {\n    id: \"default-sydney\",\n    location: [-33.8688, 151.2093] as [number, number],\n    label: \"Sydney\",\n  },\n  {\n    id: \"default-capetown\",\n    location: [-33.9249, 18.4241] as [number, number],\n    label: \"Cape Town\",\n  },\n  {\n    id: \"default-dubai\",\n    location: [25.2048, 55.2708] as [number, number],\n    label: \"Dubai\",\n  },\n  //   {\n  //     id: \"default-paris\",\n  //     location: [48.8566, 2.3522] as [number, number],\n  //     label: \"Paris\",\n  //   },\n  {\n    id: \"default-saopaulo\",\n    location: [-23.5505, -46.6333] as [number, number],\n    label: \"São Paulo\",\n  },\n]\n\nexport const showcaseDefaultArcs = [\n  {\n    id: \"default-sf-tokyo\",\n    from: [37.7595, -122.4367] as [number, number],\n    to: [35.6762, 139.6503] as [number, number],\n    label: \"SF → Tokyo\",\n  },\n  {\n    id: \"default-nyc-london\",\n    from: [40.7128, -74.006] as [number, number],\n    to: [51.5074, -0.1278] as [number, number],\n    label: \"NYC → London\",\n  },\n]\n\n// Showcase: Stickers\nexport const stickerMarkers = [\n  {\n    id: \"sticker-paris\",\n    location: [48.86, 2.35] as [number, number],\n    sticker: \"🥐\",\n  },\n  {\n    id: \"sticker-tokyo\",\n    location: [35.68, 139.65] as [number, number],\n    sticker: \"🗼\",\n  },\n  {\n    id: \"sticker-nyc\",\n    location: [40.71, -74.01] as [number, number],\n    sticker: \"🍎\",\n  },\n  {\n    id: \"sticker-rio\",\n    location: [-22.91, -43.17] as [number, number],\n    sticker: \"🎭\",\n  },\n  {\n    id: \"sticker-sydney\",\n    location: [-33.87, 151.21] as [number, number],\n    sticker: \"🐨\",\n  },\n  {\n    id: \"sticker-cairo\",\n    location: [30.04, 31.24] as [number, number],\n    sticker: \"🐪\",\n  },\n  {\n    id: \"sticker-rome\",\n    location: [41.9, 12.5] as [number, number],\n    sticker: \"🍕\",\n  },\n  {\n    id: \"sticker-mexico\",\n    location: [19.43, -99.13] as [number, number],\n    sticker: \"🌮\",\n  },\n  {\n    id: \"sticker-india\",\n    location: [28.61, 77.21] as [number, number],\n    sticker: \"🐘\",\n  },\n  {\n    id: \"sticker-iceland\",\n    location: [64.15, -21.94] as [number, number],\n    sticker: \"🧊\",\n  },\n  {\n    id: \"sticker-london\",\n    location: [51.51, -0.13] as [number, number],\n    sticker: \"☕\",\n  },\n  {\n    id: \"sticker-hawaii\",\n    location: [21.31, -157.86] as [number, number],\n    sticker: \"🏄\",\n  },\n  {\n    id: \"sticker-amsterdam\",\n    location: [52.37, 4.9] as [number, number],\n    sticker: \"🚲\",\n  },\n  {\n    id: \"sticker-beijing\",\n    location: [39.9, 116.4] as [number, number],\n    sticker: \"🐉\",\n  },\n  {\n    id: \"sticker-moscow\",\n    location: [55.75, 37.62] as [number, number],\n    sticker: \"🪆\",\n  },\n  {\n    id: \"sticker-seoul\",\n    location: [37.57, 126.98] as [number, number],\n    sticker: \"🎮\",\n  },\n]\n\n// Showcase: Live badge\nexport const liveMarkers = [\n  { id: \"live-sf\", location: [37.78, -122.44] as [number, number] },\n  { id: \"live-london\", location: [51.51, -0.13] as [number, number] },\n  { id: \"live-tokyo\", location: [35.68, 139.65] as [number, number] },\n  { id: \"live-paris\", location: [48.86, 2.35] as [number, number] },\n  { id: \"live-sydney\", location: [-33.87, 151.21] as [number, number] },\n  { id: \"live-nyc\", location: [40.71, -74.01] as [number, number] },\n]\n\n// Showcase: Interactive markers\nexport const interactiveMarkers = [\n  {\n    id: \"hq\",\n    location: [37.78, -122.44] as [number, number],\n    name: \"HQ\",\n    users: 1420,\n  },\n  {\n    id: \"eu\",\n    location: [52.52, 13.41] as [number, number],\n    name: \"EU\",\n    users: 892,\n  },\n  {\n    id: \"asia\",\n    location: [35.68, 139.65] as [number, number],\n    name: \"Asia\",\n    users: 2103,\n  },\n  {\n    id: \"latam\",\n    location: [-23.55, -46.63] as [number, number],\n    name: \"LATAM\",\n    users: 567,\n  },\n  {\n    id: \"mena\",\n    location: [25.2, 55.27] as [number, number],\n    name: \"MENA\",\n    users: 734,\n  },\n  {\n    id: \"oceania\",\n    location: [-33.87, 151.21] as [number, number],\n    name: \"APAC\",\n    users: 445,\n  },\n]\n\n// Showcase: Polaroid photos\nexport const polaroidMarkers = [\n  {\n    id: \"polaroid-sf\",\n    location: [37.78, -122.44] as [number, number],\n    image: \"/sf.jpg\",\n    caption: \"San Francisco\",\n    rotate: -5,\n  },\n  {\n    id: \"polaroid-nyc\",\n    location: [40.71, -74.01] as [number, number],\n    image: \"/nyc.jpg\",\n    caption: \"New York\",\n    rotate: 4,\n  },\n  {\n    id: \"polaroid-tokyo\",\n    location: [35.68, 139.65] as [number, number],\n    image: \"/tokyo.jpg\",\n    caption: \"Tokyo\",\n    rotate: -3,\n  },\n  {\n    id: \"polaroid-sydney\",\n    location: [-33.87, 151.21] as [number, number],\n    image: \"/sydney.jpg\",\n    caption: \"Sydney\",\n    rotate: 6,\n  },\n  {\n    id: \"polaroid-beijing\",\n    location: [39.9, 116.4] as [number, number],\n    image: \"/beijing.jpg\",\n    caption: \"Beijing\",\n    rotate: -4,\n  },\n  {\n    id: \"polaroid-egypt\",\n    location: [29.98, 31.13] as [number, number],\n    image: \"/egypt.jpg\",\n    caption: \"Egypt\",\n    rotate: 3,\n  },\n  {\n    id: \"polaroid-pisa\",\n    location: [43.72, 10.4] as [number, number],\n    image: \"/pisa.jpg\",\n    caption: \"Pisa\",\n    rotate: -6,\n  },\n  {\n    id: \"polaroid-singapore\",\n    location: [1.35, 103.82] as [number, number],\n    image: \"/singapore.jpg\",\n    caption: \"Singapore\",\n    rotate: 5,\n  },\n]\n\n// Showcase: Pulse animations\nexport const pulseMarkers = [\n  { id: \"pulse-1\", location: [51.51, -0.13] as [number, number], delay: 0 },\n  { id: \"pulse-2\", location: [40.71, -74.01] as [number, number], delay: 0.5 },\n  { id: \"pulse-3\", location: [35.68, 139.65] as [number, number], delay: 1 },\n  { id: \"pulse-4\", location: [-33.87, 151.21] as [number, number], delay: 1.5 },\n]\n\n// Showcase: Highlight bars\nexport const barMarkers = [\n  {\n    id: \"bar-1\",\n    location: [40.71, -74.01] as [number, number],\n    value: 85,\n    label: \"NYC\",\n  },\n  {\n    id: \"bar-2\",\n    location: [51.51, -0.13] as [number, number],\n    value: 62,\n    label: \"London\",\n  },\n  {\n    id: \"bar-3\",\n    location: [35.68, 139.65] as [number, number],\n    value: 94,\n    label: \"Tokyo\",\n  },\n  {\n    id: \"bar-4\",\n    location: [1.35, 103.82] as [number, number],\n    value: 78,\n    label: \"Singapore\",\n  },\n]\n\n// Showcase: Analytics (visitor tracking)\nexport const analyticsMarkers = [\n  {\n    id: \"vis-1\",\n    location: [40.71, -74.01] as [number, number],\n    visitors: 847,\n    trend: 12,\n  },\n  {\n    id: \"vis-2\",\n    location: [51.51, -0.13] as [number, number],\n    visitors: 623,\n    trend: -3,\n  },\n  {\n    id: \"vis-3\",\n    location: [35.68, 139.65] as [number, number],\n    visitors: 412,\n    trend: 8,\n  },\n  {\n    id: \"vis-4\",\n    location: [48.86, 2.35] as [number, number],\n    visitors: 385,\n    trend: 5,\n  },\n  {\n    id: \"vis-5\",\n    location: [-33.87, 151.21] as [number, number],\n    visitors: 201,\n    trend: 15,\n  },\n  {\n    id: \"vis-6\",\n    location: [52.52, 13.41] as [number, number],\n    visitors: 178,\n    trend: -1,\n  },\n]\n\n// Showcase: Flights\nexport const flightArcs = [\n  {\n    id: \"flight-1\",\n    from: [40.64, -73.78] as [number, number],\n    to: [51.47, -0.46] as [number, number],\n  },\n  {\n    id: \"flight-2\",\n    from: [51.47, -0.46] as [number, number],\n    to: [25.25, 55.36] as [number, number],\n  },\n  {\n    id: \"flight-3\",\n    from: [35.55, 139.78] as [number, number],\n    to: [37.62, -122.38] as [number, number],\n  },\n  {\n    id: \"flight-4\",\n    from: [1.36, 103.99] as [number, number],\n    to: [-33.95, 151.18] as [number, number],\n  },\n  {\n    id: \"flight-5\",\n    from: [48.86, 2.35] as [number, number],\n    to: [40.64, -73.78] as [number, number],\n  },\n]\n\nexport const flightMarkers = [\n  { id: \"apt-jfk\", location: [40.64, -73.78] as [number, number] },\n  { id: \"apt-lhr\", location: [51.47, -0.46] as [number, number] },\n  { id: \"apt-dxb\", location: [25.25, 55.36] as [number, number] },\n  { id: \"apt-nrt\", location: [35.55, 139.78] as [number, number] },\n  { id: \"apt-sfo\", location: [37.62, -122.38] as [number, number] },\n  { id: \"apt-sin\", location: [1.36, 103.99] as [number, number] },\n  { id: \"apt-syd\", location: [-33.95, 151.18] as [number, number] },\n  { id: \"apt-cdg\", location: [48.86, 2.35] as [number, number] },\n]\n\n// Showcase: Labels (text stickers)\nexport const labelMarkers = [\n  {\n    id: \"label-1\",\n    location: [48.86, 2.35] as [number, number],\n    text: \"visit soon!\",\n    color: \"#e84855\",\n    rotate: -8,\n  },\n  {\n    id: \"label-2\",\n    location: [35.68, 139.65] as [number, number],\n    text: \"amazing food\",\n    color: \"#2a9d8f\",\n    rotate: 5,\n  },\n  {\n    id: \"label-3\",\n    location: [40.71, -74.01] as [number, number],\n    text: \"home ♥\",\n    color: \"#e76f51\",\n    rotate: -3,\n  },\n  {\n    id: \"label-4\",\n    location: [-33.87, 151.21] as [number, number],\n    text: \"bucket list\",\n    color: \"#264653\",\n    rotate: 7,\n  },\n  {\n    id: \"label-5\",\n    location: [51.51, -0.13] as [number, number],\n    text: \"rainy but fun\",\n    color: \"#7b2cbf\",\n    rotate: -5,\n  },\n  {\n    id: \"label-6\",\n    location: [-22.91, -43.17] as [number, number],\n    text: \"samba time!\",\n    color: \"#f4a261\",\n    rotate: 4,\n  },\n  {\n    id: \"label-7\",\n    location: [55.75, 37.62] as [number, number],\n    text: \"cold but cozy\",\n    color: \"#457b9d\",\n    rotate: -6,\n  },\n  {\n    id: \"label-8\",\n    location: [25.2, 55.27] as [number, number],\n    text: \"so luxurious\",\n    color: \"#d4a373\",\n    rotate: 3,\n  },\n  {\n    id: \"label-9\",\n    location: [1.35, 103.82] as [number, number],\n    text: \"foodie heaven\",\n    color: \"#e63946\",\n    rotate: -4,\n  },\n  {\n    id: \"label-10\",\n    location: [-34.6, -58.38] as [number, number],\n    text: \"tango nights\",\n    color: \"#9d4edd\",\n    rotate: 6,\n  },\n]\n\n// Showcase: Satellites\nexport const satelliteMarkers = [\n  { id: \"sat-1\", location: [45.0, -120.0] as [number, number] },\n  { id: \"sat-2\", location: [30.0, 45.0] as [number, number] },\n  { id: \"sat-3\", location: [-15.0, 100.0] as [number, number] },\n  { id: \"sat-4\", location: [60.0, -30.0] as [number, number] },\n  { id: \"sat-5\", location: [-40.0, -60.0] as [number, number] },\n  { id: \"sat-6\", location: [10.0, 150.0] as [number, number] },\n  { id: \"sat-7\", location: [55.0, 80.0] as [number, number] },\n  { id: \"sat-8\", location: [-25.0, 20.0] as [number, number] },\n  { id: \"sat-9\", location: [70.0, 25.0] as [number, number] },\n  { id: \"sat-10\", location: [-5.0, -75.0] as [number, number] },\n  { id: \"sat-11\", location: [35.0, -95.0] as [number, number] },\n  { id: \"sat-12\", location: [-50.0, 140.0] as [number, number] },\n  { id: \"sat-13\", location: [20.0, -20.0] as [number, number] },\n  { id: \"sat-14\", location: [50.0, 120.0] as [number, number] },\n  { id: \"sat-15\", location: [-30.0, 70.0] as [number, number] },\n  { id: \"sat-16\", location: [5.0, -150.0] as [number, number] },\n]\n\n// Showcase: CDN (Vercel-style edge network)\nexport const cdnMarkers = [\n  {\n    id: \"cdn-iad\",\n    location: [38.95, -77.45] as [number, number],\n    region: \"iad1\",\n  },\n  {\n    id: \"cdn-sfo\",\n    location: [37.62, -122.38] as [number, number],\n    region: \"sfo1\",\n  },\n  {\n    id: \"cdn-cdg\",\n    location: [49.01, 2.55] as [number, number],\n    region: \"cdg1\",\n  },\n  {\n    id: \"cdn-hnd\",\n    location: [35.55, 139.78] as [number, number],\n    region: \"hnd1\",\n  },\n  {\n    id: \"cdn-syd\",\n    location: [-33.95, 151.18] as [number, number],\n    region: \"syd1\",\n  },\n  {\n    id: \"cdn-gru\",\n    location: [-23.43, -46.47] as [number, number],\n    region: \"gru1\",\n  },\n  {\n    id: \"cdn-sin\",\n    location: [1.36, 103.99] as [number, number],\n    region: \"sin1\",\n  },\n  {\n    id: \"cdn-arn\",\n    location: [59.65, 17.93] as [number, number],\n    region: \"arn1\",\n  },\n  {\n    id: \"cdn-dub\",\n    location: [53.43, -6.25] as [number, number],\n    region: \"dub1\",\n  },\n  {\n    id: \"cdn-bom\",\n    location: [19.09, 72.87] as [number, number],\n    region: \"bom1\",\n  },\n]\n\nexport const cdnArcs = [\n  {\n    id: \"cdn-arc-1\",\n    from: [38.95, -77.45] as [number, number], // IAD\n    to: [49.01, 2.55] as [number, number], // CDG\n    traffic: \"2.4 TB/s\",\n  },\n  {\n    id: \"cdn-arc-2\",\n    from: [37.62, -122.38] as [number, number], // SFO\n    to: [35.55, 139.78] as [number, number], // HND\n    traffic: \"1.8 TB/s\",\n  },\n  {\n    id: \"cdn-arc-3\",\n    from: [49.01, 2.55] as [number, number], // CDG\n    to: [1.36, 103.99] as [number, number], // SIN\n    traffic: \"1.2 TB/s\",\n  },\n  {\n    id: \"cdn-arc-4\",\n    from: [38.95, -77.45] as [number, number], // IAD\n    to: [-23.43, -46.47] as [number, number], // GRU\n    traffic: \"890 GB/s\",\n  },\n  {\n    id: \"cdn-arc-5\",\n    from: [35.55, 139.78] as [number, number], // HND\n    to: [-33.95, 151.18] as [number, number], // SYD\n    traffic: \"720 GB/s\",\n  },\n  {\n    id: \"cdn-arc-6\",\n    from: [49.01, 2.55] as [number, number], // CDG\n    to: [19.09, 72.87] as [number, number], // BOM\n    traffic: \"650 GB/s\",\n  },\n]\n\n// Showcase: Weather emojis\nexport const weatherMarkers = [\n  {\n    id: \"weather-1\",\n    location: [50.0, -100.0] as [number, number],\n    emoji: \"☀️\",\n  },\n  { id: \"weather-2\", location: [55.0, 10.0] as [number, number], emoji: \"🌧️\" },\n  { id: \"weather-3\", location: [25.0, 80.0] as [number, number], emoji: \"⛈️\" },\n  {\n    id: \"weather-4\",\n    location: [-10.0, -60.0] as [number, number],\n    emoji: \"🌤️\",\n  },\n  { id: \"weather-5\", location: [65.0, 100.0] as [number, number], emoji: \"❄️\" },\n  { id: \"weather-6\", location: [35.0, 140.0] as [number, number], emoji: \"🌸\" },\n  { id: \"weather-7\", location: [-30.0, 25.0] as [number, number], emoji: \"🌈\" },\n  { id: \"weather-8\", location: [40.0, -5.0] as [number, number], emoji: \"☁️\" },\n  {\n    id: \"weather-9\",\n    location: [-45.0, 170.0] as [number, number],\n    emoji: \"🌊\",\n  },\n  {\n    id: \"weather-10\",\n    location: [15.0, -130.0] as [number, number],\n    emoji: \"🌴\",\n  },\n  {\n    id: \"weather-11\",\n    location: [70.0, -40.0] as [number, number],\n    emoji: \"🌨️\",\n  },\n  {\n    id: \"weather-12\",\n    location: [-20.0, 130.0] as [number, number],\n    emoji: \"🔥\",\n  },\n  { id: \"weather-13\", location: [5.0, 40.0] as [number, number], emoji: \"🌪️\" },\n  { id: \"weather-14\", location: [45.0, 60.0] as [number, number], emoji: \"🌙\" },\n  {\n    id: \"weather-15\",\n    location: [-35.0, -70.0] as [number, number],\n    emoji: \"⭐\",\n  },\n  {\n    id: \"weather-16\",\n    location: [20.0, -20.0] as [number, number],\n    emoji: \"🌞\",\n  },\n]\n\n// Showcase configs\nexport const showcaseConfigs: Record<string, ShowcaseConfig> = {\n  default: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 10,\n    markerColor: [0.3, 0.45, 0.85],\n    baseColor: [1, 1, 1],\n    arcColor: [0.3, 0.45, 0.85],\n    markerSize: 0.025,\n    markerElevation: 0.01,\n  },\n  stickers: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 8,\n    markerColor: [0.85, 0.35, 0.6],\n    baseColor: [1, 1, 1],\n    arcColor: [0.9, 0.4, 0.7],\n    markerSize: 0.03,\n    markerElevation: 0,\n  },\n  live: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 10,\n    markerColor: [0.9, 0.2, 0.2],\n    baseColor: [0.95, 0.95, 0.95],\n    arcColor: [0.9, 0.3, 0.3],\n    markerSize: 0.02,\n    markerElevation: 0.01,\n  },\n  pulse: {\n    theta: 0.2,\n    dark: 1,\n    mapBrightness: 10,\n    markerColor: [0.2, 0.8, 0.9],\n    baseColor: [0.5, 0.5, 0.5],\n    arcColor: [0.3, 0.85, 0.95],\n    markerSize: 0.025,\n    markerElevation: 0,\n  },\n  interactive: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 10,\n    markerColor: [0.1, 0.2, 0.45],\n    baseColor: [1, 1, 1],\n    arcColor: [0.15, 0.3, 0.55],\n    markerSize: 0.025,\n    markerElevation: 0,\n  },\n  polaroids: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 9,\n    markerColor: [0.4, 0.6, 0.9],\n    baseColor: [1, 1, 1],\n    arcColor: [0.5, 0.7, 1],\n    markerSize: 0.02,\n    markerElevation: 0,\n  },\n  bars: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 9,\n    markerColor: [0.15, 0.55, 0.55],\n    baseColor: [1, 1, 1],\n    arcColor: [0.2, 0.6, 0.6],\n    markerSize: 0.02,\n    markerElevation: 0,\n  },\n  analytics: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 10,\n    markerColor: [0.3, 0.85, 0.45],\n    baseColor: [1, 1, 1],\n    arcColor: [0.25, 0.9, 0.5],\n    markerSize: 0.04,\n    markerElevation: 0,\n  },\n  flights: {\n    theta: 0.2,\n    dark: 0.05,\n    mapBrightness: 8,\n    markerColor: [0.3, 0.55, 0.95],\n    baseColor: [0.98, 0.98, 1],\n    arcColor: [0.35, 0.6, 1],\n    markerSize: 0.02,\n    markerElevation: 0,\n  },\n  labels: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 9,\n    markerColor: [0.55, 0.35, 0.75],\n    baseColor: [1, 1, 1],\n    arcColor: [0.6, 0.4, 0.8],\n    markerSize: 0.025,\n    markerElevation: 0,\n  },\n  satellites: {\n    theta: 0.2,\n    dark: 0.01,\n    mapBrightness: 9,\n    markerColor: [0.9, 0.9, 0.9],\n    baseColor: [0.95, 0.95, 0.95],\n    arcColor: [0.5, 0.8, 1],\n    markerSize: 0.03,\n    markerElevation: 0.15,\n  },\n  weather: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 10,\n    markerColor: [0.4, 0.7, 0.95],\n    baseColor: [0.98, 0.98, 1],\n    arcColor: [0.5, 0.8, 1],\n    markerSize: 0.025,\n    markerElevation: 0.12,\n  },\n  cdn: {\n    theta: 0.2,\n    dark: 0,\n    mapBrightness: 10,\n    markerColor: [0, 0, 0],\n    baseColor: [1, 1, 1],\n    arcColor: [0, 0, 0],\n    markerSize: 0.012,\n    markerElevation: 0.02,\n  },\n}\n\nexport const showcases = [\n  { name: \"Globe hero\", key: \"default\" },\n  { name: \"▲ CDN\", key: \"cdn\" },\n  { name: \"Stickers\", key: \"stickers\" },\n  { name: \"Labels\", key: \"labels\" },\n  { name: \"Satellites\", key: \"satellites\" },\n  { name: \"Polaroids\", key: \"polaroids\" },\n  { name: \"Live Badge\", key: \"live\" },\n  { name: \"Flights\", key: \"flights\" },\n  { name: \"Interactive\", key: \"interactive\" },\n  { name: \"Analytics\", key: \"analytics\" },\n  { name: \"Pulse\", key: \"pulse\" },\n  { name: \"Weather\", key: \"weather\" },\n  { name: \"Bars\", key: \"bars\" },\n] as const\n\nexport type ShowcaseKey = (typeof showcases)[number][\"key\"]\n\n// Helper to get markers for a showcase\nexport function getShowcaseMarkers(key: ShowcaseKey, size: number) {\n  const markerArrays: Record<\n    ShowcaseKey,\n    { id: string; location: [number, number] }[]\n  > = {\n    default: showcaseDefaultMarkers,\n    cdn: cdnMarkers,\n    stickers: stickerMarkers,\n    live: liveMarkers,\n    interactive: interactiveMarkers,\n    polaroids: polaroidMarkers,\n    pulse: pulseMarkers,\n    bars: barMarkers,\n    analytics: analyticsMarkers,\n    flights: flightMarkers,\n    labels: labelMarkers,\n    satellites: satelliteMarkers,\n    weather: weatherMarkers,\n  }\n  const arr = markerArrays[key]\n  if (!arr) {\n    return []\n  }\n  return arr.map((m) => ({ location: m.location, size, id: m.id }))\n}\n\n// Helper to get arcs for a showcase\nexport function getShowcaseArcs(key: ShowcaseKey) {\n  if (key === \"default\") {\n    return showcaseDefaultArcs.map((a) => ({\n      from: a.from,\n      to: a.to,\n      id: a.id,\n    }))\n  }\n  if (key === \"flights\") {\n    return flightArcs.map((a) => ({ ...a }))\n  }\n  if (key === \"cdn\") {\n    return cdnArcs.map((a) => ({ ...a }))\n  }\n  return []\n}\n\n// ---------------------------------------------------------------------------\n// Theme → RGB for the WebGL globe (dark mode only; light matches the default demo look)\n// ---------------------------------------------------------------------------\n\nconst CSS_RGB_RE = /rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i\n\nfunction probeCssColorToRgb01(color: string): [number, number, number] {\n  if (typeof document === \"undefined\") {\n    return [0.5, 0.5, 0.5]\n  }\n  const el = document.createElement(\"div\")\n  el.style.color = color\n  el.style.position = \"fixed\"\n  el.style.left = \"0\"\n  el.style.top = \"0\"\n  el.style.opacity = \"0\"\n  el.style.pointerEvents = \"none\"\n  document.body.appendChild(el)\n  const rgb = getComputedStyle(el).color\n  document.body.removeChild(el)\n  const m = rgb.match(CSS_RGB_RE)\n  if (!m) {\n    return [0.5, 0.5, 0.5]\n  }\n  return [Number(m[1]) / 255, Number(m[2]) / 255, Number(m[3]) / 255]\n}\n\nfunction cssVarTriplet(name: `--${string}`): [number, number, number] {\n  return probeCssColorToRgb01(`var(${name})`)\n}\n\nfunction clamp01(n: number) {\n  return Math.min(1, Math.max(0, n))\n}\n\nfunction saturateRgb(\n  rgb: [number, number, number],\n  amount: number\n): [number, number, number] {\n  const lum = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]\n  return [\n    clamp01(lum + (rgb[0] - lum) * amount),\n    clamp01(lum + (rgb[1] - lum) * amount),\n    clamp01(lum + (rgb[2] - lum) * amount),\n  ]\n}\n\nfunction useResolvedIsDark(): boolean {\n  const { resolvedTheme } = useTheme()\n  return resolvedTheme === \"dark\"\n}\n\ntype CobeGlobeHandle = {\n  update: (state: Record<string, unknown>) => void\n  destroy: () => void\n}\n\nfunction anchorLabelStyle(\n  id: string,\n  kind: \"marker\" | \"arc\"\n): React.CSSProperties {\n  const visible =\n    kind === \"marker\" ? `--cobe-visible-${id}` : `--cobe-visible-arc-${id}`\n  const anchor = kind === \"marker\" ? `--cobe-${id}` : `--cobe-arc-${id}`\n  return {\n    position: \"absolute\",\n    bottom: \"anchor(top)\",\n    filter: `blur(calc((1 - var(${visible}, 0)) * 8px))`,\n    left: \"anchor(center)\",\n    opacity: `var(${visible}, 0)`,\n    positionAnchor: anchor,\n    transform: \"translateX(-50%)\",\n    transition: \"opacity 0.3s ease, filter 0.3s ease\",\n  } as React.CSSProperties\n}\n\nconst demoConfig = showcaseConfigs[DEFAULT_KEY]\n\n// ---------------------------------------------------------------------------\n// Heading motion (aligned with marketing-hero-dither)\n// ---------------------------------------------------------------------------\n\nconst textGroupVariants: Variants = {\n  hidden: {},\n  visible: {\n    transition: {\n      staggerChildren: 0.08,\n      delayChildren: 0.05,\n    },\n  },\n}\n\nconst textWordVariants: Variants = {\n  hidden: { opacity: 0, y: 18 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { type: \"spring\", duration: 0.65, bounce: 0.14 },\n  },\n}\n\nconst textBlockVariants: Variants = {\n  hidden: { opacity: 0, y: 16 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { type: \"spring\", duration: 0.65, bounce: 0.1, delay: 0.18 },\n  },\n}\n\nconst eyebrowVariants: Variants = {\n  hidden: { opacity: 0, y: 12 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { type: \"spring\", duration: 0.5, bounce: 0.1 },\n  },\n}\n\nfunction AnimatedTextLine({\n  content,\n  splitWords = false,\n}: {\n  content: React.ReactNode\n  splitWords?: boolean\n}) {\n  const reduceMotion = useReducedMotion()\n\n  if (!splitWords || typeof content !== \"string\") {\n    return (\n      <motion.span\n        className=\"inline-block\"\n        variants={reduceMotion ? undefined : textWordVariants}\n      >\n        {content}\n      </motion.span>\n    )\n  }\n\n  const words = content.split(\" \")\n\n  return (\n    <motion.span\n      className=\"text-balance\"\n      variants={reduceMotion ? undefined : textGroupVariants}\n    >\n      {words.map((word, index) => (\n        <motion.span\n          className=\"mr-[0.25em] inline-block last:mr-0\"\n          key={`${word}-${index}`}\n          variants={reduceMotion ? undefined : textWordVariants}\n        >\n          {word}\n        </motion.span>\n      ))}\n    </motion.span>\n  )\n}\n\nfunction CobeScanlineTitle({\n  className,\n  title,\n}: {\n  className?: string\n  title: string\n}) {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none flex items-center justify-center\",\n        className\n      )}\n    >\n      <div className=\"relative inline-block\">\n        <h1\n          className={cn(\n            \"relative z-0 text-center font-extrabold font-mono tracking-[-0.07em]\",\n            \"text-[clamp(2rem,8.5vw,3.85rem)]\",\n            \"text-chart-3 dark:text-chart-2\",\n            \"drop-shadow-[0_0_40px_oklch(from_var(--color-chart-3)_l_c_h/0.28)]\",\n            \"dark:drop-shadow-[0_0_36px_oklch(from_var(--color-chart-2)_l_c_h/0.25)]\"\n          )}\n        >\n          {title}\n        </h1>\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 z-10 opacity-[0.38] mix-blend-soft-light dark:opacity-25\"\n          style={{\n            backgroundImage:\n              \"repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.5) 3px, rgba(255,255,255,0.5) 4px)\",\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Default showcase globe (matches showcases.tsx default + classic demo look)\n// ---------------------------------------------------------------------------\n\nexport interface DefaultShowcaseGlobeProps {\n  className?: string\n  globeSize?: number\n  title?: string\n  orbitPhrase?: string\n  /** When true, omit the centered scanline title (e.g. headline lives in the hero column). */\n  hideCenterTitle?: boolean\n}\n\nexport function DefaultShowcaseGlobe({\n  className,\n  globeSize = 520,\n  title = \"CULT PRO\",\n  orbitPhrase = \"Ship-ready sections · \",\n  hideCenterTitle = false,\n}: DefaultShowcaseGlobeProps) {\n  const canvasRef = React.useRef<HTMLCanvasElement>(null)\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const isInView = useInView(rootRef, { once: false, margin: \"120px\" })\n  const shouldReduceMotion = useReducedMotion()\n  const isDark = useResolvedIsDark()\n  const phiAutoRef = React.useRef(0)\n  const pointerInteracting = React.useRef<{ x: number; y: number } | null>(null)\n  const lastPointer = React.useRef<{ x: number; y: number; t: number } | null>(\n    null\n  )\n  const dragOffset = React.useRef({ phi: 0, theta: 0 })\n  const velocity = React.useRef({ phi: 0, theta: 0 })\n  const phiOffsetRef = React.useRef(0)\n  const thetaOffsetRef = React.useRef(0)\n  const isPausedRef = React.useRef(false)\n  const speedRef = React.useRef(1)\n  const bufferSize = globeSize * 2\n  const reactId = React.useId()\n  const orbitPathId = `hero-orbit-${reactId.replace(/:/g, \"\")}`\n\n  const cobeMarkers = React.useMemo(\n    () => getShowcaseMarkers(DEFAULT_KEY, demoConfig.markerSize),\n    []\n  )\n  const cobeArcs = React.useMemo(() => getShowcaseArcs(DEFAULT_KEY), [])\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLCanvasElement>) => {\n      pointerInteracting.current = { x: e.clientX, y: e.clientY }\n      if (canvasRef.current) {\n        canvasRef.current.style.cursor = \"grabbing\"\n      }\n      isPausedRef.current = true\n    },\n    []\n  )\n\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\n    if (pointerInteracting.current === null) {\n      return\n    }\n    const deltaX = e.clientX - pointerInteracting.current.x\n    const deltaY = e.clientY - pointerInteracting.current.y\n    dragOffset.current = { phi: deltaX / 300, theta: deltaY / 1000 }\n\n    const now = Date.now()\n    if (lastPointer.current) {\n      const dt = Math.max(now - lastPointer.current.t, 1)\n      const maxVelocity = 0.15\n      velocity.current = {\n        phi: Math.max(\n          -maxVelocity,\n          Math.min(\n            maxVelocity,\n            ((e.clientX - lastPointer.current.x) / dt) * 0.3\n          )\n        ),\n        theta: Math.max(\n          -maxVelocity,\n          Math.min(\n            maxVelocity,\n            ((e.clientY - lastPointer.current.y) / dt) * 0.08\n          )\n        ),\n      }\n    }\n    lastPointer.current = { x: e.clientX, y: e.clientY, t: now }\n  }, [])\n\n  const handlePointerUp = React.useCallback(() => {\n    if (pointerInteracting.current !== null) {\n      phiOffsetRef.current += dragOffset.current.phi\n      thetaOffsetRef.current += dragOffset.current.theta\n      dragOffset.current = { phi: 0, theta: 0 }\n      lastPointer.current = null\n    }\n    pointerInteracting.current = null\n    if (canvasRef.current) {\n      canvasRef.current.style.cursor = \"grab\"\n    }\n    isPausedRef.current = false\n  }, [])\n\n  React.useEffect(() => {\n    window.addEventListener(\"pointermove\", handlePointerMove, { passive: true })\n    window.addEventListener(\"pointerup\", handlePointerUp, { passive: true })\n    return () => {\n      window.removeEventListener(\"pointermove\", handlePointerMove)\n      window.removeEventListener(\"pointerup\", handlePointerUp)\n    }\n  }, [handlePointerMove, handlePointerUp])\n\n  React.useEffect(() => {\n    if (!(canvasRef.current && isInView)) {\n      return\n    }\n\n    const canvas = canvasRef.current\n    const logicalSize = bufferSize\n    const dpr = Math.min(\n      window.devicePixelRatio || 1,\n      window.innerWidth < 640 ? 1.8 : 2\n    )\n\n    let baseColor: [number, number, number]\n    let markerColor: [number, number, number]\n    let arcColor: [number, number, number]\n    let glowColor: [number, number, number]\n    let dark: number\n    let mapBrightness: number\n    let opacity: number\n\n    if (isDark) {\n      const cardRgb = cssVarTriplet(\"--card\")\n      const mutedRgb = cssVarTriplet(\"--muted\")\n      baseColor = [\n        cardRgb[0] * 0.52 + 0.03,\n        cardRgb[1] * 0.55 + 0.05,\n        Math.min(0.96, cardRgb[2] * 0.6 + 0.1),\n      ]\n      markerColor = saturateRgb(cssVarTriplet(\"--chart-3\"), 1.28)\n      arcColor = saturateRgb(cssVarTriplet(\"--chart-4\"), 1.18)\n      glowColor = mutedRgb.map((c) => Math.min(1, c * 0.55)) as [\n        number,\n        number,\n        number,\n      ]\n      dark = 1\n      mapBrightness = 6.8\n      opacity = 0.88\n    } else {\n      baseColor = demoConfig.baseColor\n      markerColor = demoConfig.markerColor\n      arcColor = demoConfig.arcColor\n      glowColor = [0.94, 0.93, 0.91]\n      dark = demoConfig.dark\n      mapBrightness = demoConfig.mapBrightness\n      opacity = 0.72\n    }\n\n    const globe = createGlobe(canvas, {\n      devicePixelRatio: dpr,\n      width: logicalSize,\n      height: logicalSize,\n      phi: phiAutoRef.current + phiOffsetRef.current,\n      theta: demoConfig.theta + thetaOffsetRef.current,\n      dark,\n      diffuse: 1.5,\n      mapSamples: 16_000,\n      mapBrightness,\n      baseColor,\n      markerColor,\n      glowColor,\n      scale: 1,\n      offset: [0, 0],\n      opacity,\n      markers: cobeMarkers,\n      arcs: cobeArcs,\n      arcColor,\n      arcWidth: 0.5,\n      arcHeight: 0.25,\n      markerElevation: demoConfig.markerElevation,\n    } as never) as unknown as CobeGlobeHandle\n\n    let raf = 0\n    const tick = () => {\n      if (!isPausedRef.current) {\n        if (!shouldReduceMotion) {\n          phiAutoRef.current += 0.003 * speedRef.current\n        }\n        if (\n          Math.abs(velocity.current.phi) > 0.0001 ||\n          Math.abs(velocity.current.theta) > 0.0001\n        ) {\n          phiOffsetRef.current += velocity.current.phi\n          thetaOffsetRef.current += velocity.current.theta\n          velocity.current.phi *= 0.95\n          velocity.current.theta *= 0.95\n        }\n        const thetaMin = -0.4\n        const thetaMax = 0.4\n        if (thetaOffsetRef.current < thetaMin) {\n          thetaOffsetRef.current += (thetaMin - thetaOffsetRef.current) * 0.1\n        } else if (thetaOffsetRef.current > thetaMax) {\n          thetaOffsetRef.current += (thetaMax - thetaOffsetRef.current) * 0.1\n        }\n      }\n      globe.update({\n        phi: phiAutoRef.current + phiOffsetRef.current + dragOffset.current.phi,\n        theta:\n          demoConfig.theta + thetaOffsetRef.current + dragOffset.current.theta,\n        width: logicalSize,\n        height: logicalSize,\n        markers: cobeMarkers,\n        arcs: cobeArcs,\n      })\n      raf = requestAnimationFrame(tick)\n    }\n    raf = requestAnimationFrame(tick)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      globe.destroy()\n    }\n  }, [isInView, cobeMarkers, cobeArcs, bufferSize, shouldReduceMotion, isDark])\n\n  const orbitText = React.useMemo(() => orbitPhrase.repeat(12), [orbitPhrase])\n\n  return (\n    <div\n      className={cn(\n        \"relative mx-auto w-full max-w-[min(100vw-2rem,640px)] lg:mx-0 lg:max-w-none\",\n        className\n      )}\n      data-slot=\"default-showcase-globe\"\n      ref={rootRef}\n    >\n      <motion.div\n        animate={\n          isInView ? { opacity: 1, scale: 1 } : { opacity: 0.85, scale: 0.98 }\n        }\n        className=\"relative mx-auto aspect-square w-full\"\n        initial={{ opacity: 0, scale: 0.96 }}\n        style={{ maxWidth: globeSize, height: globeSize, width: globeSize }}\n        transition={{ duration: 0.9, ease: [0.25, 0.4, 0.25, 1] }}\n      >\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 z-0 flex items-center justify-center\"\n        >\n          <svg\n            className={cn(\n              \"h-full max-h-[300px] w-full max-w-[300px] text-chart-3 dark:text-chart-2\",\n              !shouldReduceMotion &&\n                \"motion-safe:animate-[spin_360s_linear_infinite]\"\n            )}\n            viewBox=\"0 0 300 300\"\n          >\n            <defs>\n              <path\n                d=\"M 150,150 m -130,0 a 130,130 0 1,0 260,0 a 130,130 0 1,0 -260,0\"\n                id={orbitPathId}\n              />\n            </defs>\n            <text\n              className=\"fill-current font-medium font-mono uppercase tracking-[0.22em]\"\n              style={{ fontSize: 8.5 }}\n            >\n              <textPath href={`#${orbitPathId}`} startOffset=\"0%\">\n                {orbitText}\n              </textPath>\n            </text>\n          </svg>\n        </div>\n\n        <canvas\n          className=\"relative z-1 block size-full max-h-full max-w-full cursor-grab touch-none\"\n          height={bufferSize}\n          onPointerDown={handlePointerDown}\n          onPointerEnter={() => {\n            speedRef.current = 0.8\n          }}\n          onPointerLeave={() => {\n            speedRef.current = 1\n          }}\n          ref={canvasRef}\n          style={{ contain: \"layout paint size\" }}\n          width={bufferSize}\n        />\n\n        {hideCenterTitle ? null : (\n          <CobeScanlineTitle className=\"absolute inset-0 z-2\" title={title} />\n        )}\n\n        {showcaseDefaultMarkers.map((m) => (\n          <div\n            className=\"pointer-events-none z-3 rounded-sm border border-chart-4/80 bg-chart-3 px-2 py-1 font-mono text-[9px] text-white uppercase tracking-wide shadow-sm sm:text-[10px] dark:border-chart-2/70 dark:bg-chart-2 dark:text-background\"\n            key={m.id}\n            style={anchorLabelStyle(m.id, \"marker\")}\n          >\n            {m.label}\n          </div>\n        ))}\n        {showcaseDefaultArcs.map((a) => (\n          <div\n            className=\"pointer-events-none z-3 rounded-sm border-2 border-chart-3 bg-background px-1.5 py-0.5 font-mono text-[8px] text-chart-3 uppercase tracking-wide shadow-sm sm:text-[9px] dark:border-chart-2 dark:bg-card dark:text-chart-2\"\n            key={a.id}\n            style={anchorLabelStyle(a.id, \"arc\")}\n          >\n            {a.label}\n          </div>\n        ))}\n      </motion.div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Full hero section\n// ---------------------------------------------------------------------------\n\nexport interface MarketingHeroGlobeProps {\n  className?: string\n  /** Screen-reader / SEO title; also used if you omit visible heading strings. */\n  srTitle?: string\n  /** First headline line (word-by-word animation). */\n  title?: string\n  /** Second headline line under the title. */\n  headingSubtitle?: string\n  subtitle?: React.ReactNode\n  orbitPhrase?: string\n  globeSize?: number\n  /** Hide the small eyebrow line above the headline */\n  hideEyebrow?: boolean\n}\n\nexport function MarketingHeroGlobe({\n  className,\n  srTitle,\n  title = \"Cult Pro\",\n  headingSubtitle = \"Sections you can ship today.\",\n  subtitle,\n  orbitPhrase,\n  globeSize = 460,\n  hideEyebrow = false,\n}: MarketingHeroGlobeProps) {\n  const ref = React.useRef<HTMLElement>(null)\n  const reduceMotion = useReducedMotion()\n  const resolvedSrTitle = srTitle ?? `${title} — ${headingSubtitle}`\n\n  return (\n    <section\n      className={cn(\n        \"relative min-h-svh overflow-hidden bg-background pt-20 pb-16 text-foreground sm:pb-20 lg:pb-24\",\n        className\n      )}\n      data-slot=\"marketing-hero-globe\"\n      ref={ref}\n    >\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_55%_50%_at_85%_35%,var(--color-chart-3)_0%,transparent_55%)] opacity-[0.07] dark:opacity-[0.12]\"\n      />\n\n      <h1 className=\"sr-only\">{resolvedSrTitle}</h1>\n\n      <div\n        className={cn(\n          \"container relative z-10 grid gap-8 sm:gap-10\",\n          \"lg:grid-cols-[1fr_minmax(280px,500px)] lg:items-center lg:gap-12\",\n          \"xl:grid-cols-[1fr_1fr]\"\n        )}\n      >\n        <div className=\"flex flex-col justify-center gap-4 sm:gap-5 sm:px-4 md:px-8 lg:gap-6 lg:pr-0 lg:pl-4 xl:pl-8 2xl:pl-0\">\n          <div className=\"pt-2 text-center sm:pt-4 lg:pt-0 lg:text-left\">\n            {hideEyebrow ? null : (\n              <motion.p\n                animate=\"visible\"\n                className=\"mb-3 font-medium font-mono text-chart-4 text-xs uppercase tracking-[0.14em] dark:text-chart-2\"\n                initial={reduceMotion ? \"visible\" : \"hidden\"}\n                variants={reduceMotion ? undefined : eyebrowVariants}\n                viewport={{ once: true, amount: 0.5 }}\n                whileInView=\"visible\"\n              >\n                From the registry · globe hero\n              </motion.p>\n            )}\n\n            <motion.div\n              animate=\"visible\"\n              className=\"relative\"\n              initial={reduceMotion ? \"visible\" : \"hidden\"}\n              variants={reduceMotion ? undefined : textGroupVariants}\n              viewport={{ once: true, amount: 0.45 }}\n              whileInView=\"visible\"\n            >\n              <h2\n                className={cn(\n                  \"relative mb-0 flex flex-col gap-1.5 font-medium sm:gap-2\",\n                  \"tracking-[-0.04em] lg:tracking-[-0.05em]\",\n                  \"text-foreground\"\n                )}\n                data-slot=\"marketing-hero-globe-heading\"\n              >\n                <span className=\"block text-[clamp(1.875rem,1.1rem+2.8vw,3.75rem)] text-chart-3 leading-[1.1] dark:text-chart-2\">\n                  <AnimatedTextLine content={title} splitWords />\n                </span>\n                <span className=\"block text-pretty text-[clamp(1.625rem,1rem+2.4vw,3.25rem)] text-foreground leading-[1.15]\">\n                  <AnimatedTextLine content={headingSubtitle} splitWords />\n                </span>\n              </h2>\n            </motion.div>\n          </div>\n\n          {subtitle ? (\n            <motion.div\n              animate=\"visible\"\n              className=\"mx-auto max-w-xl pb-1 text-center sm:pb-2 lg:mx-0 lg:max-w-lg lg:pb-0 lg:text-left\"\n              initial={reduceMotion ? \"visible\" : \"hidden\"}\n              variants={reduceMotion ? undefined : textBlockVariants}\n              viewport={{ once: true, amount: 0.45 }}\n              whileInView=\"visible\"\n            >\n              <p className=\"text-pretty font-sans text-base text-foreground/70 leading-relaxed md:text-foreground/80 lg:text-lg\">\n                {subtitle}\n              </p>\n            </motion.div>\n          ) : null}\n        </div>\n\n        <div className=\"flex min-h-[min(72vw,320px)] items-center justify-center lg:min-h-[380px] lg:justify-end xl:min-h-[440px]\">\n          <DefaultShowcaseGlobe\n            className=\"w-full max-w-[min(100vw-2rem,520px)] lg:max-w-[min(100%,500px)]\"\n            globeSize={globeSize}\n            hideCenterTitle\n            orbitPhrase={orbitPhrase}\n            title={title}\n          />\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default MarketingHeroGlobe\n",
      "type": "registry:ui"
    }
  ]
}