Week Shipped
A week-recap list rolls day by day in heavy type, each day followed by what shipped.
$ pnpm dlx shadcn@latest add @remocn/week-shippedUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
DEFAULT_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.
Default
1 - theme"dark" | "light"
Ships light and dark; picks the palette.
Default
"dark"