Node Trail

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

Installation

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

Props10

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark interface.
accent	string— Accent color for the prompt and trails.
prompt	stringDEFAULT_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.

theme"dark" | "light"
Light or dark interface.
Default"dark"
accentstring
Accent color for the prompt and trails.
promptstring
The text typed into the prompt node.
DefaultDEFAULT_PROMPT
placeholderstring
Placeholder shown in the prompt before typing.
Default"Describe your launch"
promptLabelstring
Label above the prompt node.
Default"Prompt"
stepsNodeTrailStep[]
Nodes the trail visits: label, icons, tint, columns.
DefaultDEFAULT_STEPS
headlinestring
Closing headline shown after the camera pulls back.
Default"From one prompt to every screen."
boardNamestring
File name shown on the board chrome.
Default"launch-film.flow"
groundGshPresetId
Gradient shader preset for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.