Pipeline Journey

A workflow primitive that animates a single ticket on a Kanban board. The card lifts out of Todo, arcs through the air with a tilt and growing shadow, lands in In Progress where a brief timer ticks, then takes off again toward Done — where it triggers a deterministic confetti burst on touchdown.

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.

Notes

Determinism beats Math.random

The confetti burst looks chaotic but is fully deterministic — particle angles, distances, and colors are derived from Math.sin(i * 12.9898) * 43758.5453 style hashing so every render produces an identical frame. Never reach for Math.random inside a Remotion component.