Rewrite Bars

Bars sweep over a headline to rewrite it, 'Your launch video, rendered from code.'

Installation

$ pnpm dlx shadcn@latest add @remocn/rewrite-bars

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RewriteBars } from "@/components/remocn/rewrite-bars";
 
const RewriteBarsScene = () => (
  <RewriteBars headlines={["Scenes you copy.", "Captions that follow the voice.", "Rendered from code."]} highlight="rendered from code" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RewriteBars"
    component={RewriteBarsScene}
    durationInFrames={190}
    fps={30}
    width={1280}
    height={720}
  />
);

Bars sweep over the current headline, collapse, and reflow it into the next one, with a small eyebrow label above each. Pass headlines, eyebrows and the highlight phrase; it ships light and dark.

Props9

Prop	Type	Default
headlines	string[]— Headlines in order; bars rewrite each into the next.
eyebrows	string[]— Small label above each headline.
highlight	string"rendered from code" Phrase tinted with the accent colour.
align	"center" \| "left""center" Text alignment of the headline block.
hold	number20 Frames the text holds before the next beat.
accent	string"#3B5BFD" Accent colour (any CSS colour).
background	string— Overrides the theme background colour.
speed	number1 Playback multiplier; above 1 plays faster.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

headlinesstring[]
Headlines in order; bars rewrite each into the next.
eyebrowsstring[]
Small label above each headline.
highlightstring
Phrase tinted with the accent colour.
Default"rendered from code"
align"center" | "left"
Text alignment of the headline block.
Default"center"
holdnumber
Frames the text holds before the next beat.
Default20
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
backgroundstring
Overrides the theme background colour.
speednumber
Playback multiplier; above 1 plays faster.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"