Batting Rig

Component

About

An animated SVG diagram of a bat swinging to meet a pitched ball, visualizing bat-ball collision physics like the sweet spot and exit speed as stance changes.

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

Code

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

Usage.tsx

"use client";

import { BattingRig } from "@/components/ui/batting-rig";

export default function BattingRigDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center p-8">
      <BattingRig
        size={300}
        view="plan"
        variant="solid"
        behavior="swing"
        stance={34}
        swingRate={0.9}
        interactive
        label="BAT RIG / 02"
      />
    </div>
  );
}