Uncomment Line

Code-comment lines lose their comment markers one by one and light up as live copy.

Installation

$ pnpm dlx shadcn@latest add @remocn/uncomment-line

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { UncommentLine } from "@/components/remocn/uncomment-line";
 
const UncommentLineScene = () => (
  <UncommentLine lines={["Fork the scenes.", "Change anything.", "Own the cut."]} marker="// " highlight={-1} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="UncommentLine"
    component={UncommentLineScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);

Lines appear dimmed behind a comment marker, then each marker drops away in turn so the line lights up. Pass lines for the copy and highlight for which line ends accented. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
lines	string[]— Lines of copy, each revealed in turn.
marker	string"// " Comment prefix shown before each line until it opens.
highlight	number-1 Index of the accented line; negative counts from the end.
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.

linesstring[]
Lines of copy, each revealed in turn.
markerstring
Comment prefix shown before each line until it opens.
Default"// "
highlightnumber
Index of the accented line; negative counts from the end.
Default-1
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"