# Two Hit
URL: https://remocn.dev/docs/typography/two-hit

A two-hit headline, "Streaming now.", in white then blue, right-aligned on black

- Install: `npx shadcn@latest add @remocn/two-hit`
- Vibe: social
- Natural length: 91f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/two-hit
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TwoHit } from "@/components/remocn/two-hit";

const TwoHitScene = () => (
  <TwoHit before="Premieres Friday." after="Streaming now." hitAt={34} />
);

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

The first line appears, then at `hitAt` it is hit and replaced by the second line in the accent colour, right-aligned on a flat background. Pass `before`, `after` and `hitAt`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Premieres Friday."` | First line, shown in the base text colour. |
| `after` | `string` | `"Streaming now."` | Second line that replaces it in the accent colour. |
| `hitAt` | `number` | `34` | Frame where the second hit lands. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A two-beat teaser where a first line is replaced by a second, like a premiere card.
- A short release line with a plain statement followed by a status.

## Don't use when
- You have more than two lines to cycle — use `rewrite-bars`.
- You want a single line with no replacement — use `staggered-fade-up`.