# Path Search
URL: https://remocn.dev/docs/motion-graphics/path-search

A pathfinding search floods a grid around walls, then traces the shortest route from start to goal

- Install: `npx shadcn@latest add @remocn/path-search`
- Vibe: tech
- Natural length: 109f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/path-search
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PathSearch } from "@/components/remocn/path-search";

const PathSearchScene = () => (
  <PathSearch
    cols={17}
    rows={9}
    start={[1, 4]}
    goal={[15, 4]}
    startLabel="Start"
    goalLabel="Goal"
  />
);

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

A grid fades in with walls and labelled start and goal cells. A flood front spreads from the start one step at a time, tinting cells, until it reaches the goal; the shortest route is then traced as a glowing line back to the start. Pass `cols`, `rows`, `start`, `goal` and `walls` to change the maze. The timing scales with route length. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `cols` | `number` | `17` | Number of grid columns. |
| `rows` | `number` | `9` | Number of grid rows. |
| `start` | `[number, number]` | `[1, 4]` | Start cell as [column, row]. |
| `goal` | `[number, number]` | `[15, 4]` | Goal cell as [column, row]. |
| `walls` | `PathSearchWall[]` | `DEFAULT_WALLS` | Wall rectangles in grid units: col, row, w, h. |
| `startLabel` | `string` | `"Start"` | Label on the start cell. |
| `goalLabel` | `string` | `"Goal"` | Label on the goal cell. |
| `accent` | `string` | `"#3B5BFD"` | Color of the route start and highlights. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- Explaining routing, search or an AI agent finding a path around obstacles.
- A dev-tool or infrastructure beat that wants a clear before, search, then answer story.
- A visual metaphor for "finding the way" with labelled Start and Goal.

## Don't use when
- You want a simple arrow showing flow between boxes — use `flow-arrow`.
- The path should be a trail of nodes in a graph — use `node-trail`.
- You are showing a multi-step pipeline, not a grid search — use `deploy-pipeline`.