Caret Wipe

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

Installation

$ pnpm dlx 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
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	number3 Caret bar width, in pixels.
caretHeight	number0.5 Caret bar height as a fraction of frame height (0–1), vertically centered.

direction"left" | "right"
Sweep direction. `right` types the screen left→right; `left` reverses it.
Default"right"
caretColorstring
The caret's color — the Remocn lime by default.
Default"#C3E88D"
caretWidthnumber
Caret bar width, in pixels.
Default3
caretHeightnumber
Caret bar height as a fraction of frame height (0–1), vertically centered.
Default0.5