Loop Break

A short loop of lines repeats faster each pass until a final line breaks it and highlights one phrase.

Installation

$ pnpm dlx shadcn@latest add @remocn/loop-break

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LoopBreak } from "@/components/remocn/loop-break";
 
const LoopBreakScene = () => (
  <LoopBreak
    loop={["Render the cut.", "Spot a typo.", "Start over."]}
    fix="Change one word. Done."
    highlight="Done."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LoopBreak"
    component={LoopBreakScene}
    durationInFrames={215}
    fps={30}
    width={1280}
    height={720}
  />
);

The loop lines rise in one by one, hold, then rewind and replay faster on each of the passes. On the last pass the loop's final row is replaced by fix, which rises in sentence by sentence with the highlight phrase in the accent color while the earlier lines dim. Timing is tuned for a 215-frame composition and compresses if it is shorter. It ships light and dark.

Props8

Prop	Type	Default
loop	string[]— Lines of the repeating loop; at least two.
fix	string"Change one word. Done." Line that breaks the loop; each sentence gets its own row.
highlight	string"Done." Phrase inside fix that turns accent-colored.
passes	number3 How many times the loop plays before the break; minimum 2.
accent	string— Accent color; overrides the theme accent.
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.

loopstring[]
Lines of the repeating loop; at least two.
fixstring
Line that breaks the loop; each sentence gets its own row.
Default"Change one word. Done."
highlightstring
Phrase inside fix that turns accent-colored.
Default"Done."
passesnumber
How many times the loop plays before the break; minimum 2.
Default3
accentstring
Accent color; overrides the theme accent.
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"