# Seahorse

An upright swimmer in profile whose prehensile grip is the spine solver's own steering taken to the stop. Bony rings sit on the solved joints, and the dorsal fin runs an order faster than the body.

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

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

## Notes

- Grip and steer are one control. A seahorse's tail is its rudder taken to the stop, and the component says so by feeding both from the solver's turn.
- The hull and the bony rings are both built from the solved joints, so the plating cannot drift out of step with the bend.
- The dorsal fin is an illustrated rib fan on its own multiple of the clock; the body is the solve.

## Usage

```tsx
import { RobotSeahorse } from "@/components/ui/robot-seahorse"

<RobotSeahorse behavior="hold" />

// Or drive the coil and the sway yourself.
<RobotSeahorse phase={0.2} grip={1} sway={0.3} headAngle={-18} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"profile"` | Where the camera stands. One swimmer, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `behavior` | `"hold" | "hover" | "drift" | "static"` | `"hold"` | What it does when phase is not supplied: wound onto the holdfast, station-keeping on the dorsal fin, or loose in the current. |
| `phase` | `number` | — | Controlled cycle fraction. Supplying it stops the internal clock. |
| `speed` | `number` | `0.5` | Body cycles per second. The dorsal fin runs at six times that. |
| `offset` | `number` | `0` | Seconds of offset, so a pair break 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. |
| `grip` | `number` | — | Tail grip, 0 straight to 1 wound round the holdfast. Omit and the behavior sets it. |
| `sway` | `number` | — | Body sway, 0–1. Omit and the behavior sets it. |
| `headAngle` | `number` | — | Head tilt in degrees, clamped to −35..35. Omit and it follows the pointer. |
| `segments` | `number` | `14` | Links in the body, clamped to 3–24. |
| `interactive` | `boolean` | `true` | The head tilts to the pointer, and a click lets go of the holdfast or takes hold again. |
| `onGripChange` | `(gripped: boolean) => void` | — | Fired on the click that grips or releases. |
| `showGround` | `boolean` | `true` | The holdfast it winds its tail around. |
| `label` | `string` | — | Caption underneath the swimmer. |
| `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-seahorse.tsx`