# Tile Reveal

A grid of tiles pops in over the outgoing scene in a diagonal or seeded wave, then clears the same way onto the next scene.

```bash
npx shadcn add https://www.reelcn.dev/r/tile-reveal.json
```

Usage:

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <Gallery />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={tileReveal({ pattern: "random" })} timing={linearTiming({ durationInFrames: 36 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <Project />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

Use for:

- Openers and section breaks with a designed, grid-based feel
- Moving between portfolio, gallery or dashboard scenes

Dependencies:

- `@remotion/transitions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| cols? | `number` | — | Columns in the grid. Defaults to one per 200 design units of width. |
| rows? | `number` | — | Rows in the grid. Defaults to one per 200 design units of height. |
| pattern? | `"random" \| "diagonal"` | — | `diagonal` sweeps from the top-left corner; `random` scatters the tiles in a seeded order. |
| seed? | `string \| number` | — |  |
| color? | `string` | — | Tile color. Defaults to the theme accent. |