# Slash Wipe
URL: https://remocn.dev/docs/typography/slash-wipe

A gradient slash wipes across and reveals a large title, '/transitions', with a one-line sub

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

## Installation

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

## Usage

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

const SlashWipeScene = () => (
  <SlashWipe sections={[{ title: "captions", sub: "Styles that follow every word." }, { title: "transitions", sub: "Cuts that land on the beat." }]} />
);

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

A gradient slash sweeps across the frame and reveals the first title, then another slash wipes in the next, each with a one-line sub. Pass `sections` (title and optional sub) and your own `logo`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `sections` | `SlashSection[]` | `DEFAULT_SECTIONS` | Titles with optional sub, each revealed by a slash. |
| `every` | `number` | `56` | Frames between one section and the next. |
| `logo` | `React.ReactNode` | — | Custom logo node shown in place of the built-in mark. |
| `accent` | `string` | `"#3B5BFD"` | 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 section title card where a bright slash wipes across and reveals a big title with a one-line sub.
- A tour of product areas, one title per slash, each with a short description.

## Don't use when
- You need a single headline with no wipe between sections — use `scan-reveal`.
- The titles should scroll as a list — use `index-list`.