# Washing machine

One drum, and one dimensionless number deciding what it is doing: below a Froude number of one the load is thrown, at or above it the load is pinned to the wall.

> 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/washing-machine.json
```

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

## Notes

- A body on the drum wall leaves it where gravity can no longer supply the centripetal force: cos α = ω²r/g. Below a Froude number of one there is a release angle and the load falls on a ballistic arc that really does rejoin the drum; at or above one there is none and the load is pinned. Wash and spin are the same solver either side of one number.
- The tub is hung on springs, so it answers an out-of-balance load the way a rotor on a flexible mount does — quiet below its critical speed, violent at it, and calm again above it. It is the only machine in the set that is worse at one input than at a larger one, and the case is cut away so you can see the suspension answer.
- A top-loading machine has a vertical axis, where gravity never lifts the load at all: the agitator moves it and the tumble release does not apply, so the solved load is not drawn there. The mouth is only drawn for a camera that can see down it.
- One approximation, stated: the drum's angle is the clock times its speed rather than the integral of it, so changing the speed changes the rate from that moment rather than replaying history. Water, suds, heat and the wash itself are drawing.
- A generic domestic washer. No manufacturer, model, programme names or badge is reproduced here or in the demo.

## Usage

```tsx
import { WashingMachine } from "@/components/ui/washing-machine"

<WashingMachine behavior="cycle" load={6} />

// Or take the drum by hand and run it up through resonance.
<WashingMachine rpm={320} onRpmChange={setRpm} interactive />
<WashingMachine loading="top" door={0.8} view="iso" />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"front"` | Where the camera stands. One machine, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `rpm` | `number` | — | Controlled drum speed, 0–1600. Supplying it stops the loop. |
| `behavior` | `"cycle" | "spin" | "dry" | "static"` | `"cycle"` | A whole programme — tumbling wash, pause, then the spin ramping through the critical speed — or that ramp on its own, or a dry tumble with no water. |
| `loading` | `"front" | "top"` | `"front"` | A horizontal axis with a glass door, or a vertical axis under a hinged lid with an agitator. |
| `load` | `number` | `5` | Items in the drum, 0–10. Front loading only: they are solved, so they are only drawn where the solve holds. |
| `water` | `number` | — | Water in the drum, 0 to 1. Forced to nothing above 300 rpm, because the pump runs before a spin. |
| `door` | `number` | `0` | Door or lid opening, 0 shut to 1 at its stop. |
| `programme` | `number` | `2` | Position on the eight-place dial, which indexes in 30° detents. |
| `speed` | `number` | `0.14` | Programmes 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 across to take the drum through the whole speed range — the interesting part is the critical speed on the way up — or arrow-key it. |
| `onRpmChange` | `(rpm: number) => void` | — | Drum speed throughout a drag or a key press. |
| `showGround` | `boolean` | `true` | Draw the contact shadow under the case. |
| `label` | `string` | — | Caption under the drawing. |
| `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/washing-machine.tsx`