Comet Headline

A headline and subhead arrive while a comet streaks arcs behind each word, with one phrase highlighted.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CometHeadline } from "@/components/remocn/comet-headline";
 
const CometHeadlineScene = () => (
  <CometHeadline
    eyebrow="New in remocn"
    headline="Every launch beat, already in orbit."
    highlight="in orbit"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CometHeadline"
    component={CometHeadlineScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

An eyebrow fades in, then the headline words fly in one after another on comet arcs and cool into place, and the subhead follows. Pass eyebrow, headline, highlight and subhead to make it yours; it ships light and dark through theme.

Props8

Prop	Type	Default
eyebrow	string"New in remocn" Small label above the headline; empty to hide
headline	string"Every launch beat, already in orbit." Main headline; words arrive one by one
highlight	string"in orbit" Phrase inside the headline shown in the accent color
subhead	string"Reveals, feature heads and stats as drop-in Remotion scenes." Supporting line under the headline; empty to hide
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

eyebrowstring
Small label above the headline; empty to hide
Default"New in remocn"
headlinestring
Main headline; words arrive one by one
Default"Every launch beat, already in orbit."
highlightstring
Phrase inside the headline shown in the accent color
Default"in orbit"
subheadstring
Supporting line under the headline; empty to hide
Default"Reveals, feature heads and stats as drop-in Remotion scenes."
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"