Ball Model Picker

Component 58

About

A pinball-style reasoning effort picker with fixed-step physics, elastic peg collisions, glowing trails, and six landing outcomes.

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

Code

How Ball Model Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import BallModelPicker from "@/components/ui/ball-model-picker";

export default function BallModelPickerDemo() {
  return (
    <main
      className="bg-white dark:bg-black"
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        padding: "48px 24px 56px",
        overflow: "hidden",
      }}
    >
      <BallModelPicker className="w-[min(408px,calc(100vw-32px))]" />
    </main>
  );
}