Magnetic Bearing

An animated SVG diagram of a contactless magnetic bearing whose rotor is centered or displaced along an axis, drawn from four camera views and optionally draggable.

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

import { MagneticBearing } from "@/components/ui/magnetic-bearing";

export default function MagneticBearingDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <MagneticBearing behavior="balance" axis="x" view="iso" />
    </div>
  );
}