spb/social-runtime-crawler

1import clsx from "clsx";23/** Social Runtime Crawler mark: an eye-like orbit — the crawler *watches* a runtime rather than fetching pages. */4export function Mark({ className }: { className?: string }) {5  return (6    <svg viewBox="0 0 48 48" className={className} aria-hidden>7      <defs>8        <linearGradient id="srcg" x1="0" x2="1" y1="0" y2="1">9          <stop offset="0" stopColor="#38e1ff" />10          <stop offset="1" stopColor="#9d7bff" />11        </linearGradient>12      </defs>13      <ellipse cx="24" cy="24" rx="20" ry="11" fill="none" stroke="url(#srcg)" strokeWidth="2.2" transform="rotate(-24 24 24)" />14      <ellipse cx="24" cy="24" rx="20" ry="11" fill="none" stroke="url(#srcg)" strokeWidth="1.2" opacity=".5" transform="rotate(36 24 24)" />15      <circle cx="24" cy="24" r="5.5" fill="url(#srcg)" />16      <circle cx="41" cy="16" r="2.2" fill="#ffb347" />17    </svg>18  );19}2021export function Brand({ size = "md" }: { size?: "sm" | "md" | "lg" }) {22  return (23    <div className={clsx("flex items-center gap-3", size === "lg" && "gap-4")}>24      <Mark className={clsx(size === "sm" ? "h-6 w-6" : size === "lg" ? "h-12 w-12" : "h-8 w-8")} />25      <div className="leading-tight">26        <div className={clsx("font-semibold tracking-tight", size === "lg" ? "text-xl" : "text-sm")}>27          Social<span className="text-cyan">Crawl</span>28        </div>29        <div className={clsx("text-dim uppercase tracking-[0.2em]", size === "lg" ? "text-[11px]" : "text-[9px]")}>Social Runtime Mining</div>30      </div>31    </div>32  );33}34