# Tagline Justify
URL: https://remocn.dev/docs/typography/tagline-justify

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

- Install: `npx shadcn@latest add @remocn/tagline-justify`
- Vibe: clean
- Natural length: 112f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A closing tagline that should lock up as a tidy poster block with a logo beneath it.
- A one-sentence brand statement where a single key word deserves a gradient italic accent.

## Don't use when
- A paragraph should reflow its column width rather than set as a fixed block — use `column-reflow`.
- You want a three-line headline with parallax depth — use `parallax-lockup`.
- The text should crop in tight line by line over ruled lines — use `poster-crop`.