Tldr on Top

A short TL;DR summary stacks above a dense paragraph that fades into the background.

Installation

$ pnpm dlx shadcn@latest add @remocn/tldr-on-top

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TldrOnTop } from "@/components/remocn/tldr-on-top";
 
const TldrOnTopScene = () => (
  <TldrOnTop label="TL;DR" lines={["Every scene is a component.", "Your brand is one file."]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TldrOnTop"
    component={TldrOnTopScene}
    durationInFrames={200}
    fps={30}
    width={1280}
    height={720}
  />
);

A label and summary lines open one by one above a long body paragraph that dims behind them. Pass lines for the summary, text for the body, and label to rename the tag. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
text	stringDEFAULT_TEXT Long body paragraph shown dimmed behind the summary.
label	string"TL;DR" Tag shown above the summary lines.
lines	string[]DEFAULT_LINES Summary lines that open one by one on top.
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.

textstring
Long body paragraph shown dimmed behind the summary.
DefaultDEFAULT_TEXT
labelstring
Tag shown above the summary lines.
Default"TL;DR"
linesstring[]
Summary lines that open one by one on top.
DefaultDEFAULT_LINES
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"