# Leg

A hip, a knee and an ankle solved to wherever the foot has to be, with the knee breaking forward and two strut actuators drawn between solved points. Grab it and the foot is yours.

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

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

## Notes

- The knee always breaks forward out of the hip-to-ankle line, which is the joint a person has. An out-of-reach foot stretches the leg toward it rather than leaving the pose undefined.
- The two struts are drawn between points the solver produced, so their stroke is the pose rather than a decoration of it.
- The ankle here levels the sole against the floor and lifts the toes as the foot clears it. The heel-to-toe roll through a stance is robot-foot's mechanism; this leg borrows it only while it is running the stride itself.

## Usage

```tsx
import { RobotLeg } from "@/components/ui/robot-leg"

<RobotLeg behavior="stride" side="left" />

// Controlled: the foot is the input, the joints are the output.
<RobotLeg target={{ x: 22, y: 18 }} stance={0.6} />
<RobotLeg interactive onTargetChange={setTarget} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"profile"` | Where the camera stands. One leg, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `target` | `{ x: number; y: number }` | — | Controlled ankle in leg world units: x toward the nose, y up from the floor. Supplying it stops the loop and solves to it. |
| `stance` | `number` | — | Controlled hip height, 0 crouched to 1 standing tall. |
| `behavior` | `"stride" | "squat" | "kick" | "static"` | `"stride"` | What the leg does when target is not supplied: walk the stride cycle, drop and rise on a planted foot, or swing the foot through an arc. |
| `stride` | `number` | `0.7` | Stride length, 0 to 1. |
| `lift` | `number` | `0.6` | Foot clearance through the swing, 0 to 1. |
| `side` | `"left" | "right"` | `"right"` | A leg is handed; left is right mirrored across the machine's axis. |
| `speed` | `number` | `0.6` | 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 the foot anywhere; the hip and knee solve to it, and releasing eases back into the behaviour. |
| `onTargetChange` | `(target: Vec2) => void` | — | The foot position throughout a drag or a key press. |
| `showGround` | `boolean` | `true` | Draw the floor line. |
| `label` | `string` | — | Caption below the joint 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-leg.tsx`