Stepper Motor

An animated SVG diagram of a stepper motor with four phase windings and a toothed rotor that indexes through discrete steps, can be dragged or stepped by keyboard, and renders in plan, front, profile or isometric views.

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

import { StepperMotor } from "@/components/ui/stepper-motor";

export default function StepperMotorDemo() {
  return (
    <div className="flex w-full h-screen items-center justify-center bg-background">
      <StepperMotor behavior="step" steps={8} view="iso" />
    </div>
  );
}