Path Search

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
cols	number17 Number of grid columns.
rows	number9 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	number1 Playback speed multiplier for the whole timeline.

colsnumber
Number of grid columns.
Default17
rowsnumber
Number of grid rows.
Default9
start[number, number]
Start cell as [column, row].
Default[1, 4]
goal[number, number]
Goal cell as [column, row].
Default[15, 4]
wallsPathSearchWall[]
Wall rectangles in grid units: col, row, w, h.
DefaultDEFAULT_WALLS
startLabelstring
Label on the start cell.
Default"Start"
goalLabelstring
Label on the goal cell.
Default"Goal"
accentstring
Color of the route start and highlights.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1