# Basketball

Eight panels cut by two great circles and one wavy seam, on a ball that bounces by closed-form restitution rather than a tween: every apex is the last one times e squared.

> For the complete index, see [llms.txt](https://robocn.dev/llms.txt). A Markdown version of any page is available by appending `.md` to its URL or by sending an `Accept: text/markdown` header.

## Install

```bash
bunx --bun shadcn@latest add https://robocn.dev/r/robot-basketball.json
```

Registry item: `robot-basketball` · [`https://robocn.dev/r/robot-basketball.json`](https://robocn.dev/r/robot-basketball.json)

## Notes

- Solved: the panels, which are three closed curves on the surface rather than artwork — two orthogonal great circles cut four lunes, and one wavy curve splits each of them. And the bounce, which is the restitution ladder in closed form: apex n is `drop·e^2n` and flight n is `e` times the one before, so the ball can be asked where it is at any instant without having run the instants before it.
- Illustrated: the squash at contact, which is impact speed against a reference rather than a contact-patch model; and the energy hand-back in `dribble` and `travel`, where each bounce comes back to the same apex. `dribble` at least draws the paddle doing it; `drop` is the one that takes nothing back.
- Nothing here spins for a reason — the ball turns at a rate, it is not solved from the contact. `robot-soccer-ball` is the one that ties its turn to its travel.

## Usage

```tsx
import { RobotBasketball } from "@/components/ui/robot-basketball"

// The whole decay, played out over one cycle.
<RobotBasketball behavior="drop" />

// Or pick the ball up, which stops the loop.
<RobotBasketball height={0.8} onHeightChange={setHeight} interactive />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `height` | `number` | — | Height off the floor, 0 down and 1 at the apex. Supplying it stops the loop. |
| `onHeightChange` | `(height: number) => void` | — | Fires while it is dragged or keyed, so interaction works in controlled mode too. |
| `behavior` | `"dribble" | "travel" | "drop" | "spin" | "static"` | `"dribble"` | What it does with nobody driving it. `drop` runs the whole restitution ladder down; `dribble` is the periodic version with a paddle putting the energy back. |
| `interactive` | `boolean` | `false` | Hand it to a person: drag up and down to pick the ball up, or focus it and use the arrow keys. Let go and it falls back into the bounce. |
| `seams` | `boolean` | `true` | Draw the three curves that cut the eight panels, culled to the half the camera can see. |
| `showGround` | `boolean` | `true` | Draw the floor line and the contact shadow, which tightens as the ball comes down. |
| `label` | `string` | — | Optional technical caption under the drawing. |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"profile"` | Where the camera stands. One ball, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `speed` | `number` | `0.9` | Bounces per second. |
| `animate` | `boolean` | `true` | Off parks the machine at phase and stops rendering. A reduced-motion preference does the same. |
| `paused` | `boolean` | `false` | Freeze where it stands. |
| `phase` | `number` | `0` | Seconds of offset, so a row of machines breaks step. |
| `variant` | `"solid" | "outline" | "blueprint" | "wire"` | `"solid"` | How the machine is painted. Geometry never changes between variants. |
| `size` | `"xs" | "sm" | "md" | "lg" | "xl" | number` | `"md"` | Rendered width in pixels, or a step on the scale. |
| `color` | `string` | `var(--robot-shell)` | Body panels — the colour the machine reads as. |
| `accent` | `string` | `var(--robot-accent)` | Status colour: tip light, live tool, readouts. |
| `metal` | `string` | `var(--robot-metal)` | Bare machined parts: collars, bolts, tool bodies. |
| `dark` | `string` | `var(--robot-dark)` | Cast joints, base, shadow side. |
| `palette` | `Partial<RobotPalette>` | — | Override any subset of roles at once, including glow and grid. |

## Source

- `src/components/ui/robot-basketball.tsx`