# Caret Wipe
URL: https://remocn.dev/docs/transitions/caret-wipe

Sweep a typing caret across the frame, wiping the outgoing scene into the next

- Install: `npx shadcn@latest add @remocn/caret-wipe`
- Vibe: clean
- Natural length: 40f @ 30fps

## Installation

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

## Usage

`caretWipe()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. A text caret sweeps across
the frame — the outgoing scene is erased behind it and the incoming scene is
typed in ahead of it, like a cursor rewriting the screen.

```tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { caretWipe } from "@/components/remocn/caret-wipe";

export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 40 })}
      presentation={caretWipe({ direction: "right" })}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);
```

## Props

`caretWipe(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `direction` | `"left" \| "right"` | `"right"` | Sweep direction. `right` types the screen left→right; `left` reverses it. |
| `caretColor` | `string` | `"#C3E88D"` | The caret's color — the Remocn lime by default. |
| `caretWidth` | `number` | `3` | Caret bar width, in pixels. |
| `caretHeight` | `number` | `0.5` | Caret bar height as a fraction of frame height (0–1), vertically centered. |

## Use when
- Dev-tool, editor, or terminal demos where a typing cursor is the natural through-line between scenes.
- The scenes are UI or text surfaces that plausibly get "typed" or "erased."
- A directional wipe with a clear metaphor fits better than a generic dissolve.

## Don't use when
- The scenes aren't text or UI surfaces — the caret metaphor has nothing to type over.
- You want a textured dissolve instead of a directional wipe — use `ascii-dissolve` or `dither-dissolve`.