Story Dip

Three timestamped story lines enter in columns: a snag drops low and dims, then the resolution climbs and lights up.

Installation

$ pnpm dlx shadcn@latest add @remocn/story-dip

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StoryDip } from "@/components/remocn/story-dip";
 
const StoryDipScene = () => (
  <StoryDip
    setup={{ slug: "Wednesday, 4:00 PM", line: "The film was one render away." }}
    snag={{ slug: "4:05 PM", line: "Then the client sent a new logo." }}
    resolution={{ slug: "4:15 PM", line: "One prop later, every scene had it." }}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StoryDip"
    component={StoryDipScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Three timestamped lines enter side by side, or in two columns on a tall frame. The setup appears first, the snag then drops lower and dims, and the resolution rises to the top and turns accent-colored. Pass setup, snag and resolution as { slug, line }, where slug is the small timestamp. It ships light and dark.

Props7

Prop	Type	Default
setup	{ slug: string; line: string }DEFAULT_SETUP First beat: a small timestamp and the line.
snag	{ slug: string; line: string }DEFAULT_SNAG Second beat; it drops lower and dims.
resolution	{ slug: string; line: string }DEFAULT_RESOLUTION Third beat; it climbs to the top in the accent color.
accent	string— Color of the timestamps and the lit resolution line.
background	string— Background fill; pass "transparent" to drop it.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

setup{ slug: string; line: string }
First beat: a small timestamp and the line.
DefaultDEFAULT_SETUP
snag{ slug: string; line: string }
Second beat; it drops lower and dims.
DefaultDEFAULT_SNAG
resolution{ slug: string; line: string }
Third beat; it climbs to the top in the accent color.
DefaultDEFAULT_RESOLUTION
accentstring
Color of the timestamps and the lit resolution line.
backgroundstring
Background fill; pass "transparent" to drop it.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"