# Grid Cell
URL: https://remocn.dev/docs/typography/grid-cell

A grid cell lights up in a graph-paper field and a headline is typed into it with a mono label.

- Install: `npx shadcn@latest add @remocn/grid-cell`
- Vibe: tech
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/grid-cell
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GridCell } from "@/components/remocn/grid-cell";

const GridCellScene = () => (
  <GridCell title="Introducing remocn 2.0" label="v2.0" accent="#3B5BFD" />
);

export const RemotionRoot = () => (
  <Composition
    id="GridCell"
    component={GridCellScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A grid fades in from the center, cells merge into one that frames the headline, the label appears in the corner, and the title is typed in with a caret before the grid dims. Pass `title` and `label`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Introducing remocn 2.0"` | Headline typed into the cell |
| `label` | `string` | `"v2.0"` | Tiny mono label in the cell corner |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- An announcement framed as a design-tool grid cell, such as a version or product name.
- A technical beat where the headline should be typed into a cell with a label in the corner.

## Don't use when
- You want a plain typed line with no grid - use `typewriter`.
- You want the headline to appear with blur - use `focus-blur-resolve`.
- You want the text selected and resized - use `cursor-frame`.