Orrery Crank

import { OrreryCrank } from '@/components/ui/orrery-crank'

import { OrreryCrank } from '@/components/ui/orrery-crank'

export default function OrreryCrankDemo() {
  return (
    <div className="mx-auto w-full max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
      <p className="mb-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · ephemeris instrument
      </p>
      <h2 className="mb-6 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
        Crank time until two worlds align.
      </h2>
      <OrreryCrank
        periods={[88, 225, 365]}
        defaultDay={214}
        daysPerTurn={30}
        caption="ORRERY · 1 TURN = 30 DAYS"
        ariaLabel="Hand-cranked orrery"
      />
      <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
        Drag the crank, or tab to it and use arrows, to scrub days. Periods
        stay ratio-true; a conjunction lights when any pair closes within four
        degrees.
      </p>
    </div>
  )
}