# Typed Split Wipe
URL: https://remocn.dev/docs/typography/typed-split-wipe

A centered cursorless type build exits through opposing fixed-layout glyph wipes

- Install: `npx shadcn@latest add @remocn/typed-split-wipe`
- Vibe: tech
- Natural length: 75f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/typed-split-wipe
```

## Usage

The enter renders only the currently typed substring, so every hard character step remains centered. At `exitAt`, the component switches to a visually identical fixed layout. The prefix clips from right to left and suffix words clip from left to right with a stagger. While those gaps open, the anchor travels left by `anchorShift`, making the empty spaces on its two sides deliberately uneven before it closes last from both sides.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TypedSplitWipe } from "@/components/remocn/typed-split-wipe";

const TypedSplitWipeScene = () => (
  <TypedSplitWipe
    prefix="Introducing"
    anchor="X"
    suffix="Ads MCP"
  />
);

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

### With Backdrop

The component is transparent. The reference uses warm white text on an almost-black field.

```tsx
import { Composition } from "remotion";
import { Backdrop } from "@/components/remocn/backdrop";
import { TypedSplitWipe } from "@/components/remocn/typed-split-wipe";

const TypedSplitWipeScene = () => (
  <Backdrop fill={{ type: "color", value: "#101010" }}>
    <TypedSplitWipe
      prefix="Introducing"
      anchor="X"
      suffix="Ads MCP"
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `prefix` (required) | `string` | — | Leading text typed first and clipped right-to-left on exit |
| `anchor` (required) | `string` | — | Central segment that remains visible longest |
| `suffix` (required) | `string` | — | Space-delimited trailing words clipped left-to-right with a stagger |
| `typeFrames` | `number` | `30` | Frames used to type the complete line |
| `exitAt` | `number` | `50` | Frame on which the segmented exit begins |
| `exitFrames` | `number` | `20` | Frames used by the prefix wipe and final anchor close |
| `wordStagger` | `number` | `4` | Delay in frames between suffix word wipes |
| `anchorShift` | `number` | `-72` | Horizontal anchor travel in pixels during the prefix wipe |
| `fontSize` | `number` | `42` | Font size in pixels |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `color` | `string` | `"#e8e8e8"` | Text color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the text container |

## Use when
- A product or feature introduction should type itself cleanly before breaking into controlled directional fragments.
- One short anchor needs to remain visible while the surrounding words are erased independently.
- The exit must cut through glyphs without allowing the surviving text to reflow.

## Don't use when
- You need a conventional typewriter with a blinking caret and no exit — use `typewriter`.
- Every character should rise or move independently — use `per-character-rise`.
- One phrase should be consumed and replaced by another — use `caret-swap`.