Pipeline Journey

Installation

$ pnpm dlx shadcn@latest add @remocn/pipeline-journey

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { PipelineJourney } from "@/components/remocn/pipeline-journey";

const PipelineJourneyScene = () => (
  <PipelineJourney cardLabel="Build pipeline" accentColor="#22c55e" />
);

export const RemotionRoot = () => (
  <Composition
    id="PipelineJourney"
    component={PipelineJourneyScene}
    durationInFrames={200}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`cardLabel`	`string`	`"Build pipeline"`	Title shown on the flying ticket
`accentColor`	`string`	`"#22c55e"`	Color of the ticket border, status dot and confetti accent
`speed`	`number`	`1`	Multiplier applied to the current frame
`className`	`string`	—	Optional className for the outer container