# Car

An autonomous road car with a real steering rack: one angle in, two different wheel angles out, plus the lean the turn radius implies and a body that rides the road on its own axles.

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

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

## Notes

- Solved: the two front wheel angles and the turn radius, from `ackermann()` — the inner wheel always turns harder, because it runs on the smaller circle. The body's heave and pitch are the least-squares line through the axle contacts, which is what a rigid body on springs actually settles to.
- Stated rather than solved: the body leans outward at a roll gradient of 5.5° per g, the way a car on road springs does, off a lateral acceleration capped at 0.8 g — a car at a real rack angle has slowed for the corner. There is no roll stiffness and no weight transfer, and the road is an illustrative profile rather than a measured surface.
- Nothing integrates a path. The steering angle is a pose, not a trajectory, and the car never goes anywhere.

## Usage

```tsx
import { RobotCar } from "@/components/ui/robot-car"

<RobotCar behavior="cruise" />

// Plan view is where the two front wheels visibly disagree.
<RobotCar view="plan" steer={34} roughness={0} />
<RobotCar interactive onSteerChange={setSteer} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"profile"` | Where the camera stands. One car, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `steer` | `number` | — | Centreline steering angle in degrees, positive to starboard, clamped to ±60. Omit it and the behaviour drives the rack. |
| `onSteerChange` | `(steer: number) => void` | — | The commanded angle, while a person is steering it. |
| `behavior` | `"cruise" | "slalom" | "park" | "static"` | `"cruise"` | Lane-keeping, a real weave, or a shuffle to full lock and back. |
| `roughness` | `number` | `0.35` | How rough the road under the wheels is, 0 (glass) to 1. The body takes the least-squares line through its axle contacts; the dampers keep the rest. |
| `speed` | `number` | `0.35` | Steering cycles per second. The road passes underneath at a rate the behaviour sets. |
| `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` | Press and drag across the car to steer it; arrow keys turn the rack 4° at a time, Home centres it, Escape hands it back. |
| `showSensor` | `boolean` | `true` | The roof sensor drum. |
| `showGround` | `boolean` | `true` | The carriageway the wheels are standing on, its lane markings, and the shadow under the car. The markings stand still in the world, so they say how fast it is going. |
| `active` | `boolean` | — | Light the lamps. Omit and they light while it is driving. |
| `label` | `string` | — | Caption underneath the car. |
| `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-car.tsx`