# Escalate Cards
URL: https://remocn.dev/docs/typography/escalate-cards

Cards flash one word each, accelerating until the last word fills the frame over a date

- Install: `npx shadcn@latest add @remocn/escalate-cards`
- Vibe: premium
- Natural length: 65f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/escalate-cards
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EscalateCards } from "@/components/remocn/escalate-cards";

const EscalateCardsScene = () => (
  <EscalateCards words={["ONE", "CODEBASE", "EVERY", "LAUNCH"]} date="OCTOBER 30" accel={0.6} />
);

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

One word per card flashes in, each card shorter than the last, until the final word fills the frame and a date cuts in under it. Pass `words`, `date`, `firstBeat` and `accel`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["ONE", "CODEBASE", "EVERY", "LAUNCH"]` | One word per card, smallest first. The last one fills the frame and holds. |
| `date` | `string` | `"OCTOBER 30"` | Small line that cuts in under the last card. Pass "" to hide. |
| `firstBeat` | `number` | `26` | Length of the first card in frames. Every next card is shorter. |
| `accel` | `number` | `0.6` | Each card lasts this share of the one before: below 1 the cuts accelerate. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A rapid build-up where single words flash on cards, faster each time, until the last fills the frame.
- A date reveal under a final word for a launch announcement.

## Don't use when
- You want a countdown clock — use `drop-timer`.
- You want slams of condensed caps without cards — use `full-bleed-type`.