Crew of One

A credits roll, Written by / Directed by / Shipped by, all pointing at a big "you"

Installation

$ pnpm dlx shadcn@latest add @remocn/crew-of-one

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CrewOfOne } from "@/components/remocn/crew-of-one";
 
const CrewOfOneScene = () => <CrewOfOne roles={["Written by", "Directed by", "Shipped by"]} name="you" />;
 
export const RemotionRoot = () => (
  <Composition
    id="CrewOfOne"
    component={CrewOfOneScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

Credit-style role lines roll upward in turn, then gather into place under a large name that has been waiting at the center. Pass roles (one string per credit) and name; it spaces the roll to fit the composition length.

Props6

Prop	Type	Default
roles	string[]— Credit lines such as Written by, rolled in order.
name	string"you" The big name all roles point at.
accent	string— Color of the name; defaults to the theme accent.
background	string— Stage fill color; pass "transparent" to overlay your own footage.
speed	number1 Playback multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

rolesstring[]
Credit lines such as Written by, rolled in order.
namestring
The big name all roles point at.
Default"you"
accentstring
Color of the name; defaults to the theme accent.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
speednumber
Playback multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"