# Layout Guides
URL: https://remocn.dev/docs/product-scenes/layout-guides

Dashed column guides drop over a grid, one column fills with a label and a now line slides across

- Install: `npx shadcn@latest add @remocn/layout-guides`
- Vibe: clean
- Natural length: 54f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/layout-guides
```

## Usage

`LayoutGuides` is a full-frame scene. Dashed guides drop down every column edge
left to right. Then one column fills with a tint and gets a label, a gutter is
measured, and a marker line slides across the grid with its own label.

```tsx
import { LayoutGuides } from "@/components/remocn/layout-guides";

export const Grid = () => <LayoutGuides />;
```

Without children it draws over the demo dashboard's week grid. For your own UI,
pass it as children in a 1280×720 frame and describe the grid in frame pixels.
Only `columns`, `top` and `bottom` are required.

```tsx
import { LayoutGuides } from "@/components/remocn/layout-guides";

export const Grid = () => (
  <LayoutGuides
    guides={{
      columns: [160, 400, 640, 880, 1120],
      top: 120,
      bottom: 660,
      highlight: { rect: { x: 400, y: 120, w: 240, h: 540 }, label: "col 2" },
      now: { y: 300, from: 160, to: 1120, label: "Live" },
    }}
  >
    <MyScreen />
  </LayoutGuides>
);
```

## Timing

At 30 fps and `speed={1}`:

| Frames | Motion |
| --- | --- |
| 8 + n × 3 | Guide n drops down over 16 frames |
| 22–36 | The highlight traces and fills |
| 28–42 | The highlight's header box traces |
| 32–44 | The ruler draws and its value pops |
| 34–46 | The highlight label pops on |
| 38–54 | The now line slides across, its label pops |

`layoutGuidesLength` is 54. `speed` scales the whole timeline.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `children` | `React.ReactNode` | — | UI to lay guides over, in a 1280×720 frame. Without it a demo dashboard is drawn |
| `guides` | `{ columns: number[]; top: number; bottom: number; highlight?: { rect; label }; ruler?: Measure; now?: { y; from; to; label } }` | — | Column edges, optional highlight, ruler and now line, in frame pixels. Defaults to the demo week grid, or nothing with children |
| `color` | `string` | `"#335CFF"` | Guide, highlight and ruler color |
| `nowColor` | `string` | `"#7D52F4"` | Now line and label color |
| `background` | `string` | `"#EDEDEF"` | Stage color |
| `speed` | `number` | `1` | Playback multiplier |

## Use when
- A layout, grid or responsive feature should show the structure under a screen.
- A calendar, timeline or schedule product needs its columns and current time called out.
- A design review beat should end on the grid rather than on individual values.

## Don't use when
- Single distances and sizes should be measured — use `redline-measure`.
- Elements should be tagged with design token names — use `token-tags`.
- The beat should be a gray wireframe filling in — use `wireframe-to-final`.