Tagline Justify

A tagline springs in word by word and sets as a justified block, with one word in gradient serif italic.

Installation

$ pnpm dlx shadcn@latest add @remocn/tagline-justify

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TaglineJustify } from "@/components/remocn/tagline-justify";
 
const TaglineJustifyScene = () => (
  <TaglineJustify
    text="Your launch deserves a film as good as the product."
    highlight="film"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TaglineJustify"
    component={TaglineJustifyScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

Words spring in one after another and the line breaks stretch and scale so every line fills the same width, like a justified column. The highlight word is set in serif italic and fills with a gradient, then a hairline and a logo land beneath. The default logo is the Remocn wordmark, so pass your own logo. It ships light and dark.

Props7

Prop	Type	Default
words	string[]— Pre-split words; overrides text when given.
text	string"Your launch deserves a film as good as the product." Tagline to justify; it is split on spaces.
highlight	string"film" Word set in gradient serif italic.
logo	React.ReactNode— Logo node under the block; defaults to the Remocn wordmark.
accent	string"#3B5BFD" Color of the short accent segment on the hairline.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier for the whole timeline.

wordsstring[]
Pre-split words; overrides text when given.
textstring
Tagline to justify; it is split on spaces.
Default"Your launch deserves a film as good as the product."
highlightstring
Word set in gradient serif italic.
Default"film"
logoReact.ReactNode
Logo node under the block; defaults to the Remocn wordmark.
accentstring
Color of the short accent segment on the hairline.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1