# Counter Reveal
URL: https://remocn.dev/docs/typography/counter-reveal

A huge front word reveals a second line through the counters of its letters over a gradient.

- Install: `npx shadcn@latest add @remocn/counter-reveal`
- Vibe: clean
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/counter-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CounterReveal } from "@/components/remocn/counter-reveal";

const CounterRevealScene = () => (
  <CounterReveal word="Beta" line="Out now." accent="#3B5BFD" />
);

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

A giant front word rises letter by letter, then shrinks and drifts away so its counters open onto the second line behind it, which settles in. Pass `word` for the big text and `line` for the revealed line; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Beta"` | Large front word whose counters reveal the line |
| `line` | `string` | `"Out now."` | Secondary line shown behind the word |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A bold one-word status beat such as Beta or Live that hides a secondary line inside its letters.
- An announcement where a giant word shrinks away to reveal the detail behind it.

## Don't use when
- The front word has few closed letterforms to reveal through - use `mask-reveal-up`.
- You want both lines visible at once - use `staggered-fade-up`.
- You need a simple word-by-word exit - use `blur-out-up`.