# Node Trail
URL: https://remocn.dev/docs/product-scenes/node-trail

A prompt node trails dotted lines to workflow nodes one by one, then the camera pulls back to the board

- Install: `npx shadcn@latest add @remocn/node-trail`
- Vibe: tech
- Natural length: 154f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/node-trail
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NodeTrail } from "@/components/remocn/node-trail";

const NodeTrailScene = () => (
  <NodeTrail
    prompt="A teaser for our spring release"
    headline="One prompt. Every format."
    boardName="spring-release.flow"
  />
);

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

A prompt field types your text and is pressed, then dotted lines draw out to each step node in turn, each arriving with a pop. The camera then pulls back to reveal the whole board with its name, and the headline rises in. Pass `prompt`, `steps` (label, icons, tint, columns), `headline`, and `boardName` to make it yours. It ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark interface. |
| `accent` | `string` | — | Accent color for the prompt and trails. |
| `prompt` | `string` | `DEFAULT_PROMPT` | The text typed into the prompt node. |
| `placeholder` | `string` | `"Describe your launch"` | Placeholder shown in the prompt before typing. |
| `promptLabel` | `string` | `"Prompt"` | Label above the prompt node. |
| `steps` | `NodeTrailStep[]` | `DEFAULT_STEPS` | Nodes the trail visits: label, icons, tint, columns. |
| `headline` | `string` | `"From one prompt to every screen."` | Closing headline shown after the camera pulls back. |
| `boardName` | `string` | `"launch-film.flow"` | File name shown on the board chrome. |
| `ground` | `GshPresetId` | — | Gradient shader preset for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A beat showing one typed prompt expanding into a multi-step pipeline such as script, scenes, render, publish.
- An automation or agent product introducing its workflow canvas with a closing one-line headline.
- A launch video that needs to explain a chain of stages without a full UI walkthrough.

## Don't use when
- The graph should reshuffle between several layouts rather than grow once — use `graph-relayout`.
- You want a finished app to appear from the prompt, not a pipeline diagram — use `prompt-to-app`.
- The viewer should watch a prompt animate inside a chat composer — use `ai-prompt-flow`.