# Gabled house

A dwelling drawn as a machine: the ridge is the pitch you pass it, the garage door's rigid panels ride one track, and the fins and the array turn to face a sun that is just the time of day.

> 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/gabled-house.json
```

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

## Notes

- The garage door is the mechanism worth the file: rigid panels placed by arc length along a track that runs up the opening, round a quarter bend and back under the head. A panel straddling the bend is the chord between its two rollers, which is what a real one is, and no panel stretches at any travel.
- The fins and the array are the same solver at different stops. Both turn to face the sun and both report when they have run out of travel — the array is drawn at its stop rather than pointed at a sun it cannot reach.
- The sun is a direction in the world, not a sprite on the page, so it moves correctly from all four cameras and the shadow it casts is the house's own footprint displaced by it.
- Brick, glazing and planting are drawing. Nothing computes a heat flow, a daylight factor, a wind load or a real solar position for a real latitude: the arc is symmetric about noon, and the lit windows are a threshold on the sun's altitude.
- A generic gabled dwelling. No maker, plan book, estate or address is reproduced here or in the demo.

## Usage

```tsx
import { GabledHouse } from "@/components/ui/gabled-house"

<GabledHouse behavior="arrive" storeys={2} pitch={38} />

// Or drive the whole day yourself — everything else follows from it.
<GabledHouse sun={0.72} garage={0.6} view="iso" />
<GabledHouse interactive onSunChange={setSun} />
```

## Props

| name | type | default | description |
| --- | --- | --- | --- |
| `view` | `"plan" | "front" | "profile" | "iso"` | `"front"` | Where the camera stands. One house, four projections: straight down, straight on, side elevation, or three-quarter from above. |
| `sun` | `number` | — | Controlled time of day, 0 midnight to 1 midnight. Supplying it stops the loop. |
| `behavior` | `"day" | "arrive" | "static"` | `"day"` | Run a day, or run the same day with the garage opening for the arrival home in the late afternoon. |
| `storeys` | `number` | `2` | Storeys in the main body, rounded and clamped to 1–3. The eaves, the windows and the ridge all follow. |
| `pitch` | `number` | `38` | Roof pitch in degrees, clamped to 10–55. The ridge height is a consequence of it, not a second number. |
| `garage` | `number` | — | Controlled sectional door travel, 0 shut to 1 open. Omit it and the behaviour decides. |
| `panels` | `number` | `4` | Panels in the garage curtain, 2–6. Every one keeps its height at every travel. |
| `array` | `boolean` | `true` | The tracking array on its mast in the garden. |
| `showSun` | `boolean` | `true` | Draw the sun on its arc. It is the input, so it is worth drawing. |
| `speed` | `number` | `0.08` | Days 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 run the day by hand — the frame's width is one day — or arrow-key it. |
| `onSunChange` | `(sun: number) => void` | — | Time of day throughout a drag or a key press. |
| `showGround` | `boolean` | `true` | Draw the cast shadow, which leans away from the sun and lengthens as it drops. |
| `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/gabled-house.tsx`