remocn logoremocn

Progress Steps

Multi-step pipeline with nodes lighting up sequentially.

A workflow primitive that visualizes a multi-step process. Each node is staggered through spring() scale and interpolateColors, while connecting SVG lines fill via strokeDashoffset. Switch orientation to render as a horizontal pipeline or a vertical timeline.

Installation

$ pnpm dlx shadcn@latest add @remocn/progress-steps

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ProgressSteps } from "@/components/remocn/progress-steps";

const ProgressStepsScene = () => (
  <ProgressSteps
    steps={[{ label: "Connect" }, { label: "Process" }, { label: "Deploy" }]}
    orientation="horizontal"
    stepDuration={30}
  />
);

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

Props

PropTypeDefaultDescription
steps
Array<{ label: string }>[{label:"Connect"},{label:"Process"},{label:"Deploy"}]Ordered list of steps. The component renders one circular node per entry.
orientation
"horizontal" | "vertical""horizontal"Layout direction. Use vertical for timeline-style visuals.
activeColor
string"#22c55e"Fill color used once a step has been activated.
inactiveColor
string"#27272a"Fill color used before a step is activated.
background
string"#0a0a0a"Frame background color.
textColor
string"white"Color of the step label.
stepDuration
number30Number of frames between successive step activations.
className
string—Optional className passed to the outer container.

Notes

Lines fill via strokeDashoffset

Connecting lines use strokeDasharray set to the segment length and animate strokeDashoffset from full length down to zero. This is GPU-friendly and stays crisp at any composition size.

Pick a duration that fits all steps

Make sure durationInFrames is at least steps.length * stepDuration + 30 so the final node has time to pop into its active state.

Edit on GitHub