# Football

The ball, modelled rather than drawn: a prolate spheroid whose outline is its own central section, with laces on the surface that go round the back when it spins.

> 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-football.json
```

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

## Notes

- The silhouette is the ellipsoid's own central section, not its equator, so it is exact from any angle: end-on it is a circle of the waist radius and broadside it reaches the full length, and nothing special-cases either.
- Laces, seam and bands each carry the sign of their own normal against the view. Spinning the ball takes them round the back and brings them out the other side rather than sliding them across the front.
- No air. The ball spins and precesses at whatever it is given and never decays.

## Usage

```tsx
import { RobotFootball } from "@/components/ui/robot-football"

<RobotFootball behavior="spiral" />

// Controlled, or a ball you can turn in your hand.
<RobotFootball view="front" yaw={90} pitch={12} roll={140} />
<RobotFootball interactive onAttitudeChange={setAttitude} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `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. |
| `roll` | `number` | — | Controlled roll about the long axis, in degrees. Any of the three attitude props stops the loop. |
| `pitch` | `number` | — | Controlled nose attitude in degrees, positive nose up. |
| `yaw` | `number` | — | Controlled nose bearing in degrees, positive turning right. |
| `behavior` | `"spiral" | "wobble" | "tumble" | "snap" | "hold" | "static"` | `"spiral"` | A spiral and a wobble are the same mechanism with different numbers; a tumble takes the roll off and pitches it end over end. |
| `spin` | `number` | `6` | Turns about the long axis per cycle. |
| `wobble` | `number` | — | Half-angle of the precession cone in degrees. Omit and the flight picks one. |
| `laces` | `boolean` | `true` | Draw the stitches. They are on the surface, so they are only drawn where the camera can see them. |
| `stripes` | `boolean` | `true` | Draw the two bands near the ends. |
| `speed` | `number` | `0.5` | Cycles 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. |
| `interactive` | `boolean` | `false` | Drag across to roll it, up and down to pitch it. |
| `onAttitudeChange` | `(attitude: { yaw, pitch, roll }) => void` | — | The attitude throughout a drag or a key press. |
| `showGround` | `boolean` | `true` | Draw the contact shadow, which fades as a snap lifts the ball. |
| `label` | `string` | — | Caption below the readout. |
| `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-football.tsx`