# Grid Snap Poster
URL: https://remocn.dev/docs/numbers/grid-snap-poster

A poster layout snaps element by element across a column grid, from number to headline to body to logo.

- Install: `npx shadcn@latest add @remocn/grid-snap-poster`
- Vibe: premium
- Natural length: 106f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/grid-snap-poster
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GridSnapPoster } from "@/components/remocn/grid-snap-poster";

const GridSnapPosterScene = () => <GridSnapPoster number="3.0" title={"Launch films,\nset in motion."} body="Install a component, drop in your words, render." />;

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

A 12-column grid draws in with hairlines and bands, then a giant gradient number, the headline, the body copy and the logo each step across it in discrete snaps with a brief flash on landing; the grid fades and the layout settles. Pass `title` (use a newline for line breaks), `number`, `body`, and `name` or `logo` for the mark. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Launch films,\nset in motion."` | Headline; use a newline for a line break. |
| `number` | `string` | `"3.0"` | Giant gradient number or version. |
| `body` | `string` | `"Production-ready motion for launch videos. Install a component, drop in your words, render."` | Paragraph of body copy. |
| `name` | `string` | `"remocn"` | Brand name next to the mark; Remocn renders the real logo. |
| `logo` | `React.ReactNode` | — | Replaces the default mark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the number gradient. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A version or release announcement laid out like a poster, with a giant number and a headline.
- A premium beat where elements should step on a visible grid instead of fading in.
- A closing frame that carries the product mark and a short paragraph.

## Don't use when
- The version numeral should rise inside a glowing ring - use `version-hero`.
- The number should be shown as an edition on a colored band - use `roman-edition`.
- Tiles should pack into a poster grid around one stat - use `shape-pack`.