# Tile Wave
URL: https://remocn.dev/docs/transitions/tile-wave

A diagonal wave shrinks a grid of tiles away and regrows them as the next scene on a blue gradient

- Install: `npx shadcn@latest add @remocn/tile-wave`
- Vibe: clean
- Natural length: 94f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tile-wave
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TileWave } from "@/components/remocn/tile-wave";

const TileWaveScene = () => (
  <TileWave
    from="Idea."
    to="Shipped."
    rows={8}
    accent="#3B5BFD"
  />
);

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

The `from` scene holds for `delay` frames, then a diagonal wave shrinks the tile grid of the outgoing scene to dots and regrows the tiles carrying the `to` scene on a cold blue gradient. Pass `from` and `to` as short text or any React node, and raise `rows` for finer tiles; `theme` sets the stage between the tiles. The wave lands by frame 64 and the gradient settles by frame 94 with the default delay.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `React.ReactNode` | `"Idea."` | Outgoing scene: a short headline or any React node |
| `to` | `React.ReactNode` | `"Shipped."` | Incoming scene, set on a blue gradient panel |
| `rows` | `number` | `8` | Number of tile rows; columns follow the aspect ratio |
| `delay` | `number` | `16` | Frames the outgoing scene holds before the wave |
| `accent` | `string` | `"#3B5BFD"` | Color of the trailing period on text headlines |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"dark"` | Stage tone seen between tiles; the outgoing scene takes the other |

## Use when
- Swapping a short statement for a result or outcome word, such as Idea to Shipped, with a tactile grid motion.
- A product beat where a diagonal sweep of tiles feels like a scan or build step between two claims.
- A graphic cut where the incoming scene should arrive on a rich gradient panel.

## Don't use when
- You want a grid that lifts into solid blocks and carries a full-frame scene — use `grid-wave`.
- The change should be a few large moves rather than many small tiles — use `column-slide`.
- You need an organic, soft dissolve instead of a hard grid — use `grain-dissolve`.