Chore Fold

A teal "Captions does all of that." folds the chore away, "You just talk." beneath

Installation

$ pnpm dlx shadcn@latest add @remocn/chore-fold

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ChoreFold } from "@/components/remocn/chore-fold";
 
const ChoreFoldScene = () => <ChoreFold steps={["Export the audio.", "Fix every timestamp by hand."]} name="Captions" result="does all of that." payoff="You just talk." />;
 
export const RemotionRoot = () => (
  <Composition
    id="ChoreFold"
    component={ChoreFoldScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A list of tedious manual steps appears line by line, then folds away from the outside in until the middle is left, and the hero sentence swaps in with the tool name highlighted before the payoff line lands. Pass steps, label, name, result and payoff; it fits the read time to the composition length.

Props9

Prop	Type	Default
steps	string[]DEFAULT_STEPS The manual chores shown first, one per line.
label	string"By hand" Small label above the list of chores.
name	string"Captions" Product or tool name highlighted in the hero line.
result	string"does all of that." Rest of the hero sentence after the name.
payoff	string"You just talk." Short closing line shown beneath the hero.
accent	string— Color of the highlighted 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.

stepsstring[]
The manual chores shown first, one per line.
DefaultDEFAULT_STEPS
labelstring
Small label above the list of chores.
Default"By hand"
namestring
Product or tool name highlighted in the hero line.
Default"Captions"
resultstring
Rest of the hero sentence after the name.
Default"does all of that."
payoffstring
Short closing line shown beneath the hero.
Default"You just talk."
accentstring
Color of the highlighted 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"