Pantograph Collector

Component

About

An animated SVG diagram of a single-arm pantograph roof current collector that raises, runs, and stows against an overhead contact wire, with a draggable working-height control.

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

Code

How Pantograph Collector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import PantographCollector from "@/components/ui/pantograph-collector";

export default function PantographCollectorDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center p-10">
      <PantographCollector
        view="profile"
        variant="solid"
        behavior="raise"
        size={300}
        label="COLLECTOR / SA"
      />
    </div>
  );
}