Feature Headline

A tag pill opens from the left, then a headline rises word by word with a supporting subhead.

Installation

$ pnpm dlx shadcn@latest add @remocn/feature-headline

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FeatureHeadline } from "@/components/remocn/feature-headline";
 
const FeatureHeadlineScene = () => (
  <FeatureHeadline
    tag="New"
    label="Captions"
    headline="Captions that move with every word."
    highlight="every word"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FeatureHeadline"
    component={FeatureHeadlineScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

A pill with a tag and label opens, the headline words rise in turn with highlight in the accent, and the subhead fades in; with exit on, everything lifts away in the last frames of the Sequence. Pass tag, label, headline, highlight and subhead; it ships light and dark through theme.

Props11

Prop	Type	Default
tag	string"New" Short badge text inside the pill, such as New
label	string"Captions" Pill label; empty hides the pill
headline	string"Captions that move with every word." Main headline; words rise in one by one
highlight	string"every word" Phrase inside the headline shown in the accent color
subhead	string"31 transcript-driven caption styles, ready to drop into any video." Supporting line under the headline; empty to hide
align	"left" \| "center""left" Text alignment: left or center
exit	booleantrue Play an exit animation in the last frames
accent	string"#3B5BFD" Accent color (any valid CSS color)
background	string— Overrides the theme's stage color
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

tagstring
Short badge text inside the pill, such as New
Default"New"
labelstring
Pill label; empty hides the pill
Default"Captions"
headlinestring
Main headline; words rise in one by one
Default"Captions that move with every word."
highlightstring
Phrase inside the headline shown in the accent color
Default"every word"
subheadstring
Supporting line under the headline; empty to hide
Default"31 transcript-driven caption styles, ready to drop into any video."
align"left" | "center"
Text alignment: left or center
Default"left"
exitboolean
Play an exit animation in the last frames
Defaulttrue
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
backgroundstring
Overrides the theme's stage color
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"