# Comet Headline
URL: https://remocn.dev/docs/typography/comet-headline

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

- Install: `npx shadcn@latest add @remocn/comet-headline`
- Vibe: premium
- Natural length: 81f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A feature announcement where each word of the headline should be delivered with a trailing light.
- A hero beat with an eyebrow, a headline, one highlighted phrase and a subhead.

## Don't use when
- The headline is a single short word - use `spring-scale-in`.
- You want calm, text-only motion with no streaks - use `staggered-fade-up`.
- The scene is just a typed line - use `typewriter`.