Orbit Satellites

import { CursorOrbitSatellites } from '@/components/ui/cursor-orbit-satellites'

import { CursorOrbitSatellites } from '@/components/ui/cursor-orbit-satellites'

export default function CursorOrbitSatellitesDemo() {
  return (
    <div className="relative min-h-[560px] overflow-hidden">
      <CursorOrbitSatellites />
      <div className="relative mx-auto flex min-h-[560px] max-w-3xl flex-col items-center justify-center px-6 py-24 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Spectacle · moons of the pointer
        </p>
        <h2 className="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
          Affordance as gravity.
        </h2>
        <p className="mt-4 max-w-md text-sm leading-relaxed text-muted-foreground">
          Three satellites on non-repeating periods. Hover a control and the formation
          tightens, interactivity announced by orbit alone.
        </p>
        <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
          <a
            href="#orbit-demo"
            className="rounded-lg border border-border/60 bg-card px-5 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Pull them in
          </a>
          <button
            type="button"
            className="rounded-lg border border-border/60 bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Lock formation
          </button>
        </div>
      </div>
    </div>
  )
}