# Wake Wipe
URL: https://remocn.dev/docs/typography/wake-wipe

A wake-like wipe reveals 'Ship the launch video today.' with a gradient accent word

- Install: `npx shadcn@latest add @remocn/wake-wipe`
- Vibe: premium
- Natural length: 155f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/wake-wipe
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WakeWipe } from "@/components/remocn/wake-wipe";

const WakeWipeScene = () => (
  <WakeWipe lines={["Animations you own.", "Transitions that land.", "Ship the launch video today."]} highlight="today." />
);

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

Each line is revealed by a wipe with a soft wake behind it and cleared by the next, ending on the last line with its highlight word in a gradient. Pass `lines`, `highlight` and `eyebrow`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Lines shown in turn; the last one gets the highlight. |
| `highlight` | `string` | `"today."` | Word or phrase set in the gradient accent. |
| `eyebrow` | `string` | `"Inside remocn"` | Small label above the lines. |
| `hold` | `number` | `54` | Frames the final line holds. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A three-line pitch where each line is wiped away by a trailing wake and the last carries an accent word.
- A brand statement with a small eyebrow label above it.

## Don't use when
- You want lines to slide apart like doors — use `slide-doors`.
- You want the line rewritten in place — use `rewrite-bars`.