Cross Trainer

An animated SVG illustration of an elliptical cross-trainer machine whose pedal path is computed from a real four-bar linkage, supporting drag-to-turn interaction and multiple motion presets.

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

import { CrossTrainer } from "@/components/ui/cross-trainer";

export default function CrossTrainerDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-10">
      {/* Runs its own stride. */}
      <CrossTrainer behavior="stride" />
    </div>
  );
}