Week Shipped

A week-recap list rolls day by day in heavy type, each day followed by what shipped.

Installation
$ pnpm dlx shadcn@latest add @remocn/week-shipped

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WeekShipped } from "@/components/remocn/week-shipped";
 
const WeekShippedScene = () => (
  <WeekShipped entries={[{ day: "Monday,", item: "captions that keep up." }, { day: "Tuesday,", item: "shaders you can scrub." }]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WeekShipped"
    component={WeekShippedScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each entry rolls in as a day name followed by its shipped item, stepping through the week at a fitted pace. Pass entries with day and item for each line. It ships in light and dark through the theme prop.

Props5

PropTypeDefault
entries
WeekShippedEntry[]DEFAULT_ENTRIES

List of `{ day, item }` pairs, one per line.

accent
string—

Accent color override; falls back to the theme accent.

background
string—

Background color override; falls back to the theme background.

speed
number1

Playback speed multiplier for the whole timeline.

theme
"dark" | "light""dark"

Ships light and dark; picks the palette.

  • entriesWeekShippedEntry[]

    List of `{ day, item }` pairs, one per line.

    DefaultDEFAULT_ENTRIES

  • accentstring

    Accent color override; falls back to the theme accent.

  • backgroundstring

    Background color override; falls back to the theme background.

  • speednumber

    Playback speed multiplier for the whole timeline.

    Default1

  • theme"dark" | "light"

    Ships light and dark; picks the palette.

    Default"dark"