Lens Lab

import { LensLab } from '@/components/ui/lens-lab'

import { LensLab } from '@/components/ui/lens-lab'

export default function LensLabDemo() {
  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 · thin-lens equation
      </p>
      <h2 className="mb-6 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
        Drag the object. Watch the image re-solve.
      </h2>
      <LensLab
        focalLength={90}
        defaultDistance={240}
        caption="THIN LENS · F 90"
        ariaLabel="Thin lens ray lab"
      />
      <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
        Three principal rays, live magnification, real and virtual regimes.
        Arrow keys step the object; Shift for coarse moves.
      </p>
    </div>
  )
}