Gramophone Horn

An animated SVG illustration of a wind-up gramophone whose crank, governor speed and tonearm tracking error are all driven by one mainspring-wind value, with an optional drag-to-wind interactive mode.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gramophone Horn to your project and fits it to your theme.

import { GramophoneHorn } from "@/components/ui/gramophone-horn";

export default function GramophoneHornDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <GramophoneHorn behavior="play" progress={0.4} />
    </div>
  );
}