Progress Steps · remocn

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}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

import { Backdrop } from "@/components/remocn/backdrop";
import { ProgressSteps } from "@/components/remocn/progress-steps";

<Backdrop fill={{ type: "color", value: "#0a0a0a" }}>
  <ProgressSteps
    steps={[{ label: "Connect" }, { label: "Process" }, { label: "Deploy" }]}
    orientation="horizontal"
    stepDuration={30}
  />
</Backdrop>

Props

Prop	Type	Default	Description
`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
`textColor`	`string`	`"white"`	Color of the step label
`stepDuration`	`number`	`30`	Number of frames between successive step activations
`className`	`string`	—	Optional className passed to the outer container