# Quarterback

A drop-back and a throw with the arm solved to a release point travelling an arc, and a ball that leaves on the velocity the hand had.

> 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/gridiron-quarterback.json
```

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

## Notes

- The elbow is never placed. The hand travels an arc through three points — cocked, released, followed through — and solveElbow3 makes of it what it can.
- The release angle is the direction of the last part of the swing, sampled just before the ball leaves, so changing the arc changes the trajectory rather than only the picture.
- The rest of the flight is not drawn. The machine is about two yards tall and the pass goes twenty, so the ball leaves on the real parabola and exits the frame; the range and hang time on the readout are the whole flight.
- That parabola is drag-free, which flatters the throw.

## Usage

```tsx
import { GridironQuarterback } from "@/components/ui/gridiron-quarterback"

<GridironQuarterback behavior="throw" steps={7} number="09" />

// Controlled, or a throw you can work by hand.
<GridironQuarterback release={0.55} velocity={31} />
<GridironQuarterback interactive onReleaseChange={setRelease} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"profile"` | Where the camera stands. One machine, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `release` | `number` | — | Controlled swing: 0 cocked, 1 through the follow-through. Supplying it stops the loop. |
| `behavior` | `"drop" | "throw" | "scramble" | "set" | "static"` | `"throw"` | What it does when release is not supplied. |
| `steps` | `number` | `5` | Steps of the drop-back, which is how far into the pocket it goes. |
| `velocity` | `number` | `27` | Release speed in yards per second. A hard pass is about 27. |
| `mask` | `"cage" | "bar" | "shield"` | `"cage"` | Facemask style. |
| `number` | `string` | `""` | Two characters on the chest plate. |
| `showBall` | `boolean` | `true` | Draw the ball in the hand and on its way out of the frame. |
| `speed` | `number` | `0.4` | 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. |
| `offset` | `number` | `0` | Seconds of offset. |
| `interactive` | `boolean` | `false` | Drag across to work the throw by hand. |
| `onReleaseChange` | `(release: number) => void` | — | How far through the swing, throughout a drag or a key press. |
| `showGround` | `boolean` | `true` | Draw the contact shadow and the line the machine set up on. |
| `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/gridiron-quarterback.tsx`