Crunch

A timestamped story line, "It shipped, with time to ...", fades in over a dark brown ground

Installation

$ pnpm dlx shadcn@latest add @remocn/crunch

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Crunch } from "@/components/remocn/crunch";
 
const CrunchScene = () => <Crunch setup={{ slug: "Monday, 10:00 AM", line: "Maya had a launch on Friday." }} snag={{ slug: "Thursday, 11:40 PM", line: "Nine hours left, and still no video." }} />;
 
export const RemotionRoot = () => (
  <Composition
    id="Crunch"
    component={CrunchScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A timestamped story plays in three beats: a setup line fades out, a tense snag line sits in a column that squeezes tighter and tighter, then the walls release and a calm resolution line arrives. Pass setup, snag and resolution, each with a slug (timestamp) and line; beats stretch with the composition length.

Props7

Prop	Type	Default
setup	StoryBeatDEFAULT_SETUP First beat: a timestamp slug and a line.
snag	StoryBeatDEFAULT_SNAG Middle beat shown in the squeezing column.
resolution	StoryBeatDEFAULT_RESOLUTION Final beat that arrives after the release.
accent	string— Color for the slug and resolution; 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.

setupStoryBeat
First beat: a timestamp slug and a line.
DefaultDEFAULT_SETUP
snagStoryBeat
Middle beat shown in the squeezing column.
DefaultDEFAULT_SNAG
resolutionStoryBeat
Final beat that arrives after the release.
DefaultDEFAULT_RESOLUTION
accentstring
Color for the slug and resolution; 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"