Ballpit

Component 9

About

Realistic interactive animation of balls

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

Code

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

Usage.tsx

import { Ballpit } from "@/components/ui/ballpit";
import { Color } from "three";

const BallpitDemo = () => {
  return (
    <div className="flex w-full min-h-screen justify-center items-center bg-neutral-900">
      <div
        style={{
          position: "relative",
          overflow: "hidden",
          minHeight: "500px",
          maxHeight: "500px",
          width: "100%",
          maxWidth: "700px",
          border: "1px solid #333",
          borderRadius: "8px",
        }}
      >
        <Ballpit
          count={100}
          gravity={0.5}
          friction={0.9975}
          wallBounce={0.95}
          displayCursor={false}
          followCursor={true}
          minSize={0.4}
          maxSize={0.8}
          size0={1.2}
          colors={[new Color(16777215), new Color(16777215), new Color(0xdc3545), new Color(16777215)]}
  
        />
      </div>
    </div>
  );
};

export { BallpitDemo };