Globe

"use client";

import { Globe } from "@/lab/magicui/ui/globe";

export default function GlobeDemo() {
  return (
    <div className="@container relative flex h-full w-full items-start justify-center overflow-hidden pt-[6%]">
      <span className="pointer-events-none bg-linear-to-b from-black to-gray-300/80 bg-clip-text text-center text-[clamp(3rem,12cqw,6rem)] leading-none font-semibold whitespace-pre-wrap text-transparent">
        Globe
      </span>
      <Globe className="inset-auto top-[28%] left-1/2 w-[min(80%,600px)] -translate-x-1/2" />
      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
    </div>
  );
}