# Headline to Line
URL: https://remocn.dev/docs/typography/headline-to-line

A headline settles and its phrase collapses toward a single line over a glowing horizon

- Install: `npx shadcn@latest add @remocn/headline-to-line`
- Vibe: clean
- Natural length: 93f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/headline-to-line
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HeadlineToLine } from "@/components/remocn/headline-to-line";

const HeadlineToLineScene = () => <HeadlineToLine words={["Your", "launch", "video"]} accentIndex={1} continuation=", built from blocks you own" />;

export const RemotionRoot = () => (
  <Composition
    id="HeadlineToLine"
    component={HeadlineToLineScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Headline words pop in one by one, the accented word gets a springy pop, then the words shrink into a single line and a continuation types out after them with a blinking caret over a glowing ground. Pass `words`, `accentIndex` and `continuation`; `ground` picks the gradient preset for each theme.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["Your", "launch", "video"]` | Headline words that pop in, then shrink into the line. |
| `accentIndex` | `number` | `1` | Which headline word gets the accent color and pop. |
| `continuation` | `string` | `", built from blocks you own"` | Text typed after the headline words once they shrink. |
| `accent` | `string` | — | Color of the accented word; defaults to the theme accent. |
| `ink` | `string` | — | Text color override for the headline and continuation. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `ground` | `GshPresetId` | — | Gradient preset id for the background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground preset gradient parameters. |

## Use when
- A hero headline that should collapse into a sentence and finish typing a longer description.
- An introduction like a product name followed by a typed tagline.
- A title that should feel like it is being written into a line of copy.

## Don't use when
- The headline should only type, with no collapse — use `typewriter`.
- You want a headline that pulls focus to swap its last word — use `focus-front-swap`.
- The headline should be revealed over drifting lights — use `bokeh-title`.