# Frog

A jumper in profile. The hind legs are two-link chains solved hip to ankle, and crouch, launch, the airborne trail and the landing absorb are all the same linkage at different points of one pair of numbers.

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

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

## Notes

- Extension and altitude are the whole animal. The knee is solved from the hip and the ankle, so there is no crouched drawing and no airborne drawing to keep in step.
- The vocal sac runs on its own multiple of the clock, because a call is far faster than a jump.
- No ballistics: the arc is a scripted trajectory, and the frog never travels across the frame. The blueprint variant draws the hind leg's reach circle.

## Usage

```tsx
import { RobotFrog } from "@/components/ui/robot-frog"

<RobotFrog behavior="hop" />

// Or drive the crouch and the height yourself.
<RobotFrog extend={1} altitude={0.8} gaze={-0.5} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"profile"` | Where the camera stands. One jumper, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `behavior` | `"crouch" | "hop" | "swim" | "static"` | `"crouch"` | What it does when phase is not supplied: sit with the throat going, run the whole jump, or kick a breaststroke at mid-water. |
| `phase` | `number` | — | Controlled cycle fraction. Supplying it stops the internal clock. |
| `speed` | `number` | `0.7` | Jumps per second. |
| `offset` | `number` | `0` | Seconds of offset, so a chorus breaks step. |
| `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. |
| `extend` | `number` | — | Hind-leg extension, 0 folded into the crouch to 1 straight. Omit and the behavior sets it. |
| `altitude` | `number` | — | Height above the ground, 0–1. Omit and the behavior decides. |
| `gaze` | `number` | — | Eye aim, −1..1. Omit and they follow the pointer. |
| `interactive` | `boolean` | `true` | The eyes track the pointer, and a click jumps. |
| `onHop` | `() => void` | — | Fired on the click that jumps. |
| `showGround` | `boolean` | `true` | The ground line and the shadow, which shrinks as it rises. |
| `label` | `string` | — | Caption underneath the jumper. |
| `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-frog.tsx`